本文把高德地圖的鼠標點擊獲取經緯度與點標記與地理編碼融合到了一起
首先要創建自己的應用，并且添加key（服務用到的JavaScript API）
先把獲取經緯度的代碼復制過來，進行修改取消地圖的點擊操作。放到marker點擊效果里
var clickEventListener = map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});
并且在select方法里面添加地圖監聽
function select(e) {
AMap.event.addListener(placeSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);? //關鍵字查詢查詢
}
keywordSearch_CallBack這個方法用來獲取marker的個數，來對marker進行修改
function keywordSearch_CallBack(data) {
var resultStr = "";
var poiArr = data.poiList.pois;
var resultCount = poiArr.length;
for (var i = 0; i < resultCount; i++) {
addmarker(i, poiArr[i]);
}
map.setFitView();
}
添加marker并且對窗體進行了修改
function addmarker(i, d) {? ??
var lngX = d.location.getLng();? ? ??
var latY = d.location.getLat();? ? ?
var markerOption = {? ? ? ? ??
map:map,? ? ? ? ??
icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",? ? ? ? ??
zIndex:200,? ? ? ?
clickable:true,? ? ? ??
offset:new AMap.Pixel(-10,-34),? ? ? ??
position:new AMap.LngLat(lngX, latY)? ? ? };? ? ? ? ? ? ?
?var mar = new AMap.Marker(markerOption);? ? ? ? ? ? ? ?
?marker.push(new AMap.LngLat(lngX, latY));? ? ? ??
var infoWindow = new AMap.InfoWindow({? ? ? ? ??
content:"<h3><font color='#00a6ac'>" + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),? ? ? ? ?
size:new AMap.Size(300, 0),? ? ? ? ??
?autoMove:true,? ? ? ? ? ??
offset:new AMap.Pixel(0,-30)? ? ?
?});? ? ??
windowsArr.push(infoWindow);? ? ??
?var aa = function (e) {infoWindow.open(map, mar.getPosition());};? ? ??
AMap.event.addListener(mar, "click", aa);? ? ??
AMap.event.addListener(mar,'click',getLnglat); }//marker點擊效果
function TipContents(type, address, tel) {? //窗體內容? ? ?
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {? ? ? ? ? type = "暫無";? ? ? }? ? ?
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {? ? ? ? ? address = "暫無";? ? ? }? ? ?
if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {? ? ? ? ? tel = "暫無";? ? ? }? ? ? var str = "? 地址：" + address + "
電話：" + tel + "類型：" + type;? ? ?
?return str;? }
//鼠標在地圖上點擊，獲取經緯度坐標
function getLnglat(e) {
document.getElementById("lngX").value = e.lnglat.getLng();
document.getElementById("latY").value = e.lnglat.getLat();
}
此時效果已經實現的差不多，就差一步，當文本框里面有經緯度的時候，在地圖上顯示當前位置即可
$(document).ready(function(){
if($("#lngX").val()!=""){
var lngX = $("#lngX").val();
var latY = $("#latY").val();
lnglatXY = [lngX, latY]; //已知點坐標
//逆地理編碼
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
var marker = new AMap.Marker({? //加點
map: map,
position: lnglatXY
});
map.setFitView();
}
});
END
