高德地图实现（附案例）
需求：基于高德地图实现地图显示实现步骤：1、首先注册登录并创建应用2、创建应用后添加key，获取key值。本例为web端(JS)3.引入4。添加一个div标签作为地图容器，并为div指定id属性；并通过css定义宽度和高度。
#container{width:300px;高度：180px；}5.创建地图window.onLoad=function(){varmap=newAMap.Map('container',{zoom:6,//levelcenter:[116.397428,39.90923],//中心点坐标pitch:45,//角度ofviewviewMode:'3D',//开启3D视图，默认关闭resizeEnable:true,//是否监听地图Containersizechangefeatures:["bg","road","point"],//隐藏默认楼层mapStyle:"amap://styles/3484ce5283d8486fa3df43a67cecb8e0",//设置地图的显示样式});}varurl='https://webapi.amap.com/maps?v=1.4.15&key=Youhavetokey&callback=onLoad';varjsapi=document.createElement('script');jsapi.charset='utf-8';jsapi.src=url;document.head.appendChild(jsapi);6.mapStyle是网上定义的样式https://lbs.amap.com/dev/maps...定义好后，上传，然后然后写地址就可以了7.地图点数据：location_data:[//地图点{"name":"ApplicationCompany1",//企业名称"alert_num":5555,//告警数"info":{"location":"xxx",//营业地址"coord":[118.88,28.97],"contact":{"name":"xx",//联系人"phone":"15022222222"//手机号码}}},{"name":"AppEnterprise1","alert_num":555,"info":{"location":"xxx","coord":[116.7,39.53],"contact":{"name":"xx","phone":"15022222222"}}},{"name":"申请公司1","alert_num":55,"info":{"location":"xxx","coord":[115.480656,35.23375],"contact":{"name":"xx","phone":"15022222222"}}},{"name":"应用企业1","alert_num":112,"info":{"location":"xxx","coord":[117.27,31.86],"contact":{"name":"xx","phone":"15022222222"}}},{"name":"武钢（集团）公司","alert_num":332,"info":{"location"：“xxx”，“坐标”：[86.06,41.68]，“续act":{"name":"xx","phone":"15022222222"}}},{"name":"鞍山钢铁集团有限公司","alert_num":222,"info"：{“位置”：“xxx”，“坐标”：[125.03，46.58]，“联系人”：{“名称”：“xx”，“电话”：“15022222222”}}}，{“名称”：“唐山钢铁股份有限公司","alert_num":444,"info":{"location":"xxx","coord":[111.65,40.82],"contact":{"name":"xx","phone":"15022222222"}}}]实现效果：8.点击显示弹框marker.on('click',function(ev){//信息窗内容this.infoWin=newAMap.InfoWindow({autoMove:false,isCustom:true,//使用自定义表单offset:newAMap.Pixel(10,-10),content:'
'+me.location_data[i].name+' '});varx=ev.pixel.x;vary=ev.pixel.y;varlngLat=map.containerToLngLat(newAMap.Pixel(x,y));this.infoWin.open(map,lngLat);});实现效果：源码地址：https://github.com/myweiwei/vue-本项目其他功能请参考：https://segmentfault.com/a/11...会持续更新完善，期待您的批评指正！
