.onMarkerClick说明：用于处理针对Marker覆盖物的自定义操作，如拖拽。
AMap.event.addListener(marker, 'click', function () {
if (!map.editMode && map.onMarkerClick) map.onMarkerClick(marker);
});
Marker.getMarkerIcon
return {
pointStyle: {
width,
height,
content: Marker.getMarkerIcon(group)
}
};
MassMark这是高德地图的方法，是高德封装好的，所以是console不出来他下面的数据的，因为只要他结构一遍，这边的数据都拿不到了所以得找设置数据的地方，比如setData的位置，但是业务还是在nav-module-airmap里面写的
map.air = new MassMark(renderOptions);
经纬度 AMap.LngLat
var position = new AMap.LngLat(116, 39);//标准写法，经纬度的写法有两种，使用时经度longitude在前，纬度在后，推荐使用标准写法
经纬度转换
//使用 lngLatToContainer 方法将经纬度转换成当前像素坐标
let pixel=this.map.lngLatToContainer(m);
注意问题
上面的解决方法有个bug那就是仅仅是相对于当前屏幕的位置，只要一拖放地图，绘制的文字也会变化，不在指定的Massmark上
解决办法
为自定义图层添加渲染方法自定义图层的 render 方法即用户自定义的图层绘制方式。此 render 方法在以下两个时机进行调用：
- API在图层初次绘制
- 地图移动与缩放结束时
在 render 方法中，开发者应该更新绘制时使用的容器内像素位置来重新绘制图层内容，这个像素位置是由每个经纬度坐标转换而来，通常使用 mapObj. lnglatToContainer 方法进行转换。
// 自定义的 render 方法
function onRender() {
for (var i = 0; i < provinces.length; i += 1) {
// 使用 lngLatToContainer 方法将经纬度转换成当前像素坐标
provinces[i].containerPos = map.lngLatToContainer(provinces[i].center);
}
draw();
if(!started){
autoSize();
started = true;
}
}
// 将自定义的 render 方法挂在自定义图层的 render 属性上
customLayer.render = onRender;
我的解决方案
let onRender = ()=>{
//清空旧地图
ctxText.clearRect(0, 0, width,height);
myData.map( item => { //console.log('item是'+item);
stations.map(entries=>{//console.log('entries是'+entries);
if(item.id===entries.id){
//将经纬度放入数组
let lnglat = new AMap.LngLat(entries.gcjloc.lng, entries.gcjloc.lat);//经纬度的写法有两种，使用时经度在前，纬度在后，
//坐标转换,使用 lngLatToContainer 方法将经纬度转换成当前像素坐标
let pixel=this.map.lngLatToContainer(lnglat);
let textValue;// params取值定义
let curparams=this.map.curFilter.param;
if(item.data!=null&&item.data!=''){
let items=item.data;
if(items.hasOwnProperty(curparams)){
switch(curparams){
case 'AQI':
textValue=items.AQI.Value;//82的时候VOC里面没有AQI
console.log(textValue);
break;
case 'PM2_5':
textValue=items.PM2_5.Value;
break;
case 'PM10':
textValue=items.PM10.Value;
break;
case 'SO2':
textValue=items.SO2.Value;
break;
case 'NO2':
console.log(items.NO2.Value);
textValue=items.NO2.Value;
break;
case 'CO':
textValue=items.CO.Value;
break;
case 'O3':
textValue=items.O3.Value;
break;
}
if(textValue!=null&&textValue!=''&&textValue!=undefined){
ctxText.fillText(textValue,pixel.x,pixel.y+5);
}else{
ctxText.fillText('-',pixel.x,pixel.y+5);
}
}
}
}
})
})
}
this.textLayer.amapCustomLayer.render = onRender;
this.textLayer.amapCustomLayer.render();
this.textLayer.amapCustomLayer.setMap(this.map);
以上代码，只要地图拖放，就会调用执行render的方法，重新绘制，所以在绘制之前将前一次绘制的路径清空掉，这样不至于一拖放地图就会重回绘制一层
高德地图事件对象
- 针对Map、覆盖物等常用类，我们推荐直接使用这些类的对象的on、off成员方法来实现事件的简单绑定和移除，具有使用方便、代码简洁的特点
on( eventName, handler, context) //eventName：事件名称（必填），
handler：事件回调函数（必填），
context：事件回调中的上下文（可选，缺省时，handler中this为调用on方法的对象本身，否则this指向context引用的对象）
注意：多次绑定时，当eventName、handler函数对象、context对象有任意一个不一样就会再次绑定。
off( eventName, handler, context) // 移除事件绑定
- 第二种,使用AMap.event命名空间
addDomListener( instance, eventName, handler, context) //注册DOM对象事件：给DOM对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。
参数：
instance：需注册事件的DOM对象（必填），
eventName：事件名称（必填），
handler：事件功能函数（必填），
context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
高德地图Marker绘制
1.绘制传参一堆点
window.init = function(){
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:11, //初始化地图层级
center: [113.77986672, 23.05431564], //初始化地图中心点
mapStyle: 'blue_night' //设置地图主题
});
var marker1 = new AMap.Marker({
position: new AMap.LngLat(113.73818593, 22.92003193),
//offset: new AMap.Pixel(-8, -8),
icon: 'ico.png', // 添加 Icon 实例
size: new AMap.Size(7, 7),
zoom: 13
});
var marker2 = new AMap.Marker({
position: new AMap.LngLat(113.70980978, 22.92852671),
offset: new AMap.Pixel(-10, -10),
icon:'ico.png', // 添加 Icon 实例
title: '北京',
zoom: 13
});
var markerList = [marker1, marker2];//将标记放到数组里
map.add(markerList);//仅限数组可以这样，将点位直接添加到了地图上
}
- 仅仅绘制一个点
window.init = function(){
var icon = new AMap.Icon({
size: new AMap.Size(16, 16), // 图标尺寸
img:'./a,png',
size:[16,16],//图标的原始大小
ancher:[8,16],//锚点，图标原始大小下锚点所处的位置，相对左上角
imageOffset:[360,340],
// //可缺省，当使用精灵图时可用，标示图标在整个图片中左上角的位置
imageSize:[512,512],
// //可缺省，当使用精灵图时可用，整张图片的大小
fitZoom:14,//最合适的级别，在此级别下显示为原始大小
scaleFactor:2,//地图放大一级的缩放比例系数
maxScale:2,//最大放大比例
minScale:1//最小放大比例
})
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:11, //初始化地图层级
center: [113.77986672, 23.05431564], //初始化地图中心点
mapStyle: 'blue_night' //设置地图主题
});
var marker = new AMap.Marker({
position: new AMap.LngLat(113.73818593, 22.92003193),
//offset: new AMap.Pixel(-8, -8),
icon: ico, // 添加 Icon 实例
size: new AMap.Size(7, 7),
zoom: 13
});
marker.setMap(map); //仅限单个marker
}
3.遗留问题，如何定义自己绘制的图标的样式，不用图片
高德地图绘制行政区域边线
- 在现成好的地方，直接添加上自动就有了，
AMap.plugin('AMap.DistrictSearch', function () {
// 创建行政区查询对象
var district = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
// 设置查询行政区级别为 区
level: 'district'
})
district.search('朝阳区', function(status, result) {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries
var polygons = []
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.7,//此处可以修改样式
fillColor: '#CCF3FF',
strokeColor: '#CC66CC'
})
polygons.push(polygon)
}
// 地图自适应
map.setFitView()
}
})
})
高德地图key值必须有，否则不能更换主题，不能添加点位
添加的key带有这个&callback=init报错如下
