网站推广的一般方式,集团网站推广,省建设安全监督站的网站,软件推广赚佣金渠道要实现这个效果#xff0c;我们先看一下目前的页面展示#xff1a; 左边有一个图例#xff0c;我们可以方法缩小地图#xff0c;右边是动态的marker标记#xff0c;到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list#xf…要实现这个效果我们先看一下目前的页面展示 左边有一个图例我们可以方法缩小地图右边是动态的marker标记到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list这个时候我们可以循环创建marker节点然后统一增加到map中。 可以先看这部分代码 import React, { Component } from react;
import AMapLoader from amap/amap-jsapi-loader;
// 目前主要设置了地图的宽和高
import ../index.scss
//为了方便直接使用了已有的base64编码的图片
import {base64PNG,sanjiaoSVG,gray,red,green} from ./base64png.js
//小圆点下方的文字显示 以及样式
const content div stylewidth:auto;padding:3px;background:gray;color:#000;border:noneEU126,租凭br/XX.XX MW/div
class MapComponent extends Component{constructor(){super(); this.map {};this.AMap nullthis.state{// 模拟后端返回的数据datalist:[{icon:1,position:[121.487899486,31.24916171],title:aaaaa,zoom:3,content,},{icon:2,position:[121.287899486,31.34916171],title:bbb,zoom:3,content,},{icon:3,position:[121.387899486,31.44916171],title:ccc,zoom:3,content,},{icon:3,position:[121.487899486,31.44916171],title:ddd,zoom:3,content,},{icon:3,position:[121.487899486,31.54916171],title:eee,zoom:3,content,},]}}// 2.dom渲染成功后进行map对象的创建componentDidMount(){AMapLoader.reset() //需要把这个reset一下AMapLoader.load({key:79d80321f75bf125cb18953d4c4b2f3a, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins:[], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap){console.log(AMap,AMap)//将map对象保存起来this.AMap AMapthis.renderMapFun()}).catch(e{console.log(e);})}// 每次切换数据的时候单独调用即可renderMapFun(){this.map new this.AMap.Map(container111,{ //设置地图容器id// viewMode:3D, //是否为3D地图模式// zoom:5, //初始化地图级别// center:[105.602725,37.076636], //初始化地图中心点位置zoom: 10, //初始化地图级别center: [121.487899486,31.24916171 ] //初始化地图中心点位置-上海});const obj {1:green,2:red,3:gray}let arr []//循环创建marker对象this.state.datalist.map(i{var marker1 new AMap.Marker({icon: obj[i.icon],position: i.position,title:i.title,zoom:i.zoom,});marker1.setLabel({content:i.content,offset:new AMap.Pixel(-20,28)})arr [...arr,marker1]})// 统计加入到map对象中绘制this.map.add(arr);}render(){// 1.初始化创建地图容器,div标签作为地图容器同时为该div指定id属性return (div idcontainer111 classNamemap /div);}
}
//导出地图组建类
export default MapComponent;现在要显示左侧的图例盒子我们使用绝对定位即可 当然也是需要一部分的样式的。
#container111{padding: 0px;margin: 0px;width: 100%;height: 500px;position: relative;.leftBox{width: 130px;// height: 150px;position: absolute;top: 60px;left: 30px;z-index: 9999;background-color: #fff;padding: 10px 0 ;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);.top{font-size: 16px;display: flex;align-items: center;height: 24px;line-height: 24px;border-bottom: 1px solid #aaa;justify-content: space-around;padding-left: 10px;padding-bottom: 8px;padding-right: 10px;}.bottom{display: flex;flex-direction: column;.box{width: 100%;font-size: 14px;height: 40px;line-height: 40px;display: flex;align-items: center;padding-left: 20px;// justify-content: center;img{width: 16px;height: 16px;margin-right: 8px;}}}}
}主要就是实现 父绝子相 定位 实现了效果 页面代码
import React, { Component } from react;
import { Icon } from alife/aisc;
import AMapLoader from amap/amap-jsapi-loader;
import ../index.scss;
import { base64PNG, sanjiaoSVG, gray, red, green } from ./base64png.js;
const content div stylewidth:auto;padding:3px;background:gray;color:#000;border:noneEU126,租凭br/XX.XX MW/div;
class MapComponent extends Component {constructor() {super();this.map {};this.AMap null;this.state {zoom: 10,datalist: [{icon: 1,position: [121.487899486, 31.24916171],title: aaaaa,zoom: 3,content,},{icon: 2,position: [121.287899486, 31.34916171],title: bbb,zoom: 3,content,},{icon: 3,position: [121.387899486, 31.44916171],title: ccc,zoom: 3,content,},{icon: 3,position: [121.487899486, 31.44916171],title: ddd,zoom: 3,content,},{icon: 3,position: [121.487899486, 31.54916171],title: eee,zoom: 3,content,},],};}// 2.dom渲染成功后进行map对象的创建componentDidMount() {AMapLoader.reset(); //需要把这个reset一下AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {console.log(AMap, AMap);this.AMap AMap;this.renderMapFun();// var circle new AMap.Circle({// center: new AMap.LngLat(121.487899486, 31.24916171), // 圆心位置// radius: 10000, //半径// strokeColor: #F33, //线颜色// strokeOpacity: 1, //线透明度// strokeWeight: 3, //线粗细度// fillColor: #ee2200, //填充颜色// fillOpacity: 0.35 //填充透明度// });// this.map.add([marker1,marker2,marker3]);// this.map.add([marker1,marker2,marker3,circle]);// this.map.add(marker);}).catch((e) {console.log(e);});}renderMapFun() {this.map new this.AMap.Map(container111, {//设置地图容器id// viewMode:3D, //是否为3D地图模式// zoom:5, //初始化地图级别// center:[105.602725,37.076636], //初始化地图中心点位置zoom: this.state.zoom, //初始化地图级别center: [121.487899486, 31.24916171], //初始化地图中心点位置-上海});const obj {1: green,2: red,3: gray,};let arr [];this.state.datalist.map((i) {var marker1 new AMap.Marker({icon: obj[i.icon],position: i.position,title: i.title,zoom: i.zoom,});marker1.setLabel({content: i.content,offset: new AMap.Pixel(-20, 28),});arr [...arr, marker1];});this.map.add(arr);}addFun(){// console.log(this.map,this.map)const {zoom} this.stateif(zoom!18){this.setState({zoom:zoom1},(){// 设置地图显示的缩放级别在PC上参数zoom可设范围[3,18]// 在移动端参数zoom可设范围[3,19]。3D地图下可将zoom设置为浮点数。/this.map.setZoom(this.state.zoom)// this.renderMapFun()})}}downFun(){const {zoom} this.stateif(zoom!3){this.setState({zoom:zoom-1},(){this.map.setZoom(this.state.zoom)// this.renderMapFun()})}}render() {// 1.初始化创建地图容器,div标签作为地图容器同时为该div指定id属性return (div style{{ width: 100%, height: 100% }}div idcontainer111 classNamemapdiv classNameleftBoxdiv classNametopIcon typeadd onClick{this.addFun}/{this.state.zoom} Icon typeminus onClick{this.downFun}//divdiv classNamebottomdiv classNameboximg src{gray} alt /预计裁撤/divdiv classNameboximg src{red} alt /建设中/divdiv classNameboximg src{green} alt /预计保留/div/div/div/div/div);}
}
//导出地图组建类
export default MapComponent;
我们想实现点击左侧的 来实现放大 - 实现 缩小 后来查询相关文档官方文档上解释 setZoom设置地图显示的缩放级别在PC上参数zoom可设范围[3,18]在移动端参数zoom可设范围[3,19]。3D地图下可将zoom设置为浮点数。 意思是说我们在PC中使用只能使用的放大缩小范围为 3 - 18 所以我们在点击按钮的时候放大缩小就需要控制最大值 addFun(){// console.log(this.map,this.map)const {zoom} this.stateif(zoom!18){this.setState({zoom:zoom1},(){// 设置地图显示的缩放级别在PC上参数zoom可设范围[3,18]// 在移动端参数zoom可设范围[3,19]。3D地图下可将zoom设置为浮点数。/this.map.setZoom(this.state.zoom)// this.renderMapFun()})}}downFun(){const {zoom} this.stateif(zoom!3){this.setState({zoom:zoom-1},(){this.map.setZoom(this.state.zoom)// this.renderMapFun()})}}另外献上官方连接 https://lbs.amap.com/api/javascript-api/guide/map/state https://lbs.amap.com/demo/javascript-api/example/map/click-to-get-lnglat https://lbs.amap.com/demo/javascript-api/example/map/get-mapzoom
