1、根据地址找经纬度/修改经纬度
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition())
2、根据经纬度找地址
3、 根据当前IP获取城市
function initLocationCity() { //实例化城市查询类 var citysearch = new AMap.CitySearch(); //自动获取用户IP,返回当前城市 citysearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.city && result.bounds) { var cityinfo = result.city; var citybounds = result.bounds; document.getElementById('txtCity').value = cityinfo; var ipCity = cityinfo.replace("市", ""); $(".cityList ul a").each(function () { if ($(this).text().indexOf(ipCity) != -1) { $("#hidShopAreaId").val($(this).attr("data-content")); loadCityXY(); searchShopList(); } }); //地图显示当前城市 mapObj.setBounds(citybounds); } } else { document.getElementById('txtCity').value = result.info; } }); }
4、

$.ajaxRequest({ url: "接口路径", onRequest: function (param) { 参数 }, onResponse: function (result) { mapObj.clearMap(); $(result).each(function (i) { marker = new AMap.Marker({ position: [item.Longitude, item.Latitude], icon: new AMap.Icon({ size: new AMap.Size(40, 50), image: "/Static/Web/Images/Shop/markerIcon.png", // 覆盖标注的图标 imageOffset: new AMap.Pixel(0, 0) //相对于大图的取图位置 }) }); marker.setLabel({ // 设置数字 offset: new AMap.Pixel(0, 0), content: (parseInt(i) + 1) }); marker.on('click', function () { // 点击当前标注,清除在这之前已生成过的覆盖标注,定义不同的overMark避免和marker冲突 if (overMarker) { mapObj.remove(overMarker); }; overMarker = new AMap.Marker({ //添加自定义点标记 map: mapObj, position: [item.Longitude, item.Latitude], //基点位置 offset: new AMap.Pixel(-9, -31), //相对于基点的偏移位置 zIndex: 1000, content: '覆盖内容’ //自定义点标记覆盖物内容 }); overMarker.setMap(mapObj); mapObj.setZoomAndCenter(12, [item.Longitude, item.Latitude]);// 定位后再缩放 }); marker.setMap(mapObj); }); mapObj.setFitView(); return result; } });
5、循环遍历标注并自定义infoWindow窗口(自定义点标注,缩放地图比例,给标注添加点击事件并更改标注图标) 5、添加新标注,修改标注(覆盖物)
添加新标注:
marker = new AMap.Marker({ icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [116.41, 39.91] }); marker.setMap(map);
覆盖物:会替换掉原来的标注
function updateMarker() { // 自定义点标记内容 var markerContent = document.createElement("div"); // 点标记中的图标 var markerImg = document.createElement("img"); markerImg.className = "markerlnglat"; markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"; markerContent.appendChild(markerImg); // 点标记中的文本 var markerSpan = document.createElement("span"); markerSpan.className = 'marker'; markerSpan.innerHTML = "Hi,我换新装备啦!"; markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容 marker.setPosition([116.39, 39.93]); //更新点标记位置 }
6、根据经纬度初始化地图,并且要让地图比例放大
解决方法:
在定位完成map.setFitView();方法后设置 map.setZoomAndCenter(28, [Y,X]);// 缩放比例,经度 纬度 即可