高德地圖調用和添加標註
看過高德地圖API的同學都知道，高德地圖不同端調用是不一樣的，作為一個前端菜鳥，前一陣分別在pc端和移動端分別調用了高德地圖。情況是這個樣子的，PC端呢我們可以用高德API的web端的javascript代碼。調用沒有問題，具體是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="_map" id="container" tabindex="0"></div> //放地圖的盒子（自定義一定大小的）
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你自己申請的KEY值"></script>
<script >
//調取高德地圖，根據經緯度定位
var map = new AMap.Map(‘container‘,{ //初始化地圖
resizeEnable: true,
zoom: 10, //縮放比例
center: [116.397428, 39.90923], //你要打標註的點的位置
mapStyle:‘amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86‘
});
map.plugin(["AMap.ToolBar"], function() { //地圖工具欄，可滑動設置縮放比例
map.addControl(new AMap.ToolBar());
});
//添加標註
function addMarker(j,w){
marker = new AMap.Marker({
icon:new AMap.Icon({
image: "img/pcdt.png", //自己做的一個標註圖！！
size: new AMap.Size(23, 29), //圖標大小
imageSize: new AMap.Size(23,29)
}),
position:new AMap.LngLat(j,w) //標註位置（經緯度）
});
marker.setMap(map); //在地圖上添加點
//鼠標點擊marker彈出自定義的信息窗體
AMap.event.addListener(marker, ‘click‘, function() {
infoWindow.open(map, marker.getPosition());
});
}
addMarker(116.397428, 39.90923); //實例化
//!!!!!!以下是添加更多詳盡信息。。（還有更多，請看高德API）
// // addMarker(116, 39);
// //添加窗體信息
// //實例化信息窗體
// var content = [];
// content.push("地址：北京市朝陽區阜通東大街6號院3號樓東北8.3公裏");
// var infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定義窗體
// content: createInfoWindow(content.join("<br/>")),
// offset: new AMap.Pixel(110, -5)
// });
//
// //構建自定義信息窗體
// function createInfoWindow( content) {
// var info = document.createElement("div");
// info.className = "info";
// // 定義中部內容
// var middle = document.createElement("div");
// middle.className = "info-middle";
// middle.style.backgroundColor = ‘white‘;
// middle.innerHTML = content;
// info.appendChild(middle);
//
// // // // // 定義底部內容
// var bottom = document.createElement("div");
// bottom.className = "info-bottom";
// bottom.style.position = ‘relative‘;
// bottom.style.top = ‘0px‘;
// bottom.style.margin = ‘0 auto‘;
// var sharp = document.createElement("img");
// sharp.src = "https://webapi.amap.com/images/sharp.png";
// bottom.appendChild(sharp);
// info.appendChild(bottom);
// return info;
// }
</script>
</body>
</html>
記得要自己申請key值才可以。
移動端呢，其實調用高德地圖是十分有限制的，首先要確保用戶手機安裝了高德地圖的軟件（一般人都會安裝地圖，百度或高德，我想應該是可以獲取手機信息判斷有哪個地圖軟件再去調用！），如果沒有調用也看不到啊，其次移動端的調用前端也只能實現到地圖的展示打點了，因為高德地圖API說的很清楚，後端的java或者oc給了接口，前端的小夥伴可謂是有心無力啦，希望不久的將來前端可以自由調用吧。
高德地圖調用和添加標註