官方API:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
先说下需求吧,我就不往外一段一段的摘了:
分全部和三家运营商,按钮点击,地图中的标点变化
鼠标移入标点,显示此标点的详细信息
比如这样(样式不好看,后期大家自己调吧)
官方样式:https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
1、加载高德脚本
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.13&key=自己申请的key"></script>
2、直接上前端代码吧,见谅
var map = new AMap.Map('container', { //实例化map
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 12, //初始化地图层级
center: [113.497811,23.180948], //初始化地图中心点
mapStyle: 'amap://styles/82a2dae28bf68171897b099f0caa7f4f', //设置地图的显示样式(我这引入的是个性化地图)
});
AMap.plugin(['AMap.OverView','AMap.Geolocation'],function(){//异步同时加载多个插件
var overView = new AMap.OverView(); //鹰眼显示缩略图
map.addControl(overView);
var geolocation = new AMap.Geolocation(); //当前位置定位
map.addControl(geolocation);
});
// 多个点实例组成的数组
var markerList = []; //标记点
var removeList = []; //移除标记点,容器
//ajax异步请求
queryYys = function(){
var yys = $("#chooseyys").val();
var year = $("#queryYear").val();
var quarter = $("#queryQuarter").val();
var aQuery = {'yys': yys, 'year': year, 'quarter': quarter};
var url = " ";
$.post(url, aQuery, function(data) { //返回json数据
if (data.length >= 1){
for(var i = 0;i < data.length; i++){
var yys = data[i].yys;
var markerYys = new AMap.Marker();
markerYys.setPosition([data[i].jingdu, data[i].weidu]);
markerYys.setAnimation("AMAP_ANIMATION_DROP");
markerYys.setTitle = (data[i].name);
if(yys == "dx"){
markerYys.setIcon("../image/dianxin.png");
}else if(yys == "yd"){
markerYys.setIcon("../image/yidong.png");
}else if(yys == "lt"){
markerYys.setIcon("../image/liantong.png");
}
markerYys.infoName = data[i].name; //注意此赋值方式
markerYys.on('mouseover',function(e){
infoWindow.setContent("<div class='infoTitle'>" + e.target.infoName+ "</div>"); //格式,内容自己写(注意取值方式)
infoWindow.open(map, e.lnglat);
});
markerList.push(markerYys);
}
}
addMarker(); //加标记点方法
},'json');
}
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
offset: new AMap.Pixel(16, -45) //窗体偏移位置
});
map.on('click',function(e){ //点击地图,移除窗体(或者像官方一样加个叉号图片,在绑定点击事件)
map.clearInfoWindow();
});
function addMarker(){ //设置中心点和层级
/* var zoom = Math.floor(Math.random() * 7) + 11;
var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6;
var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6;
map.setZoomAndCenter(zoom, [lng, lat]); //同时设置地图层级与中心点 */
removeMark(); //先移除
map.add(markerList); //再加点
markerList = []; //清空
}
function removeMark(){ //移除标注
map.remove(removeList); //移除
removeList = markerList; //加入到容器中,准备下一次清除
}
3、大家不要看着觉得多,其实没啥东西!
没有分开写,大家根据需要看吧