高德地图调用和添加标注
看過高德地圖API的同學(xué)都知道，高德地圖不同端調(diào)用是不一樣的，作為一個(gè)前端菜鳥，前一陣分別在pc端和移動(dòng)端分別調(diào)用了高德地圖。情況是這個(gè)樣子的，PC端呢我們可以用高德API的web端的javascript代碼。調(diào)用沒有問題，具體是這樣的：
<!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=你自己申請(qǐng)的KEY值"></script>
<script >
//調(diào)取高德地圖，根據(jù)經(jīng)緯度定位
var map = new AMap.Map('container',{ ?//初始化地圖
? ? resizeEnable: true,
? ? zoom: 10, ?//縮放比例
? ? center: [116.397428, 39.90923], ?//你要打標(biāo)注的點(diǎn)的位置
? ? mapStyle:'amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86'
});
map.plugin(["AMap.ToolBar"], function() { //地圖工具欄，可滑動(dòng)設(shè)置縮放比例
? ? map.addControl(new AMap.ToolBar());
});
//添加標(biāo)注
function addMarker(j,w){
? ? marker = new AMap.Marker({
? ? ? ? icon:new AMap.Icon({
? ? ? ? ? ? image: "img/pcdt.png", ?//自己做的一個(gè)標(biāo)注圖！！
? ? ? ? ? ? size: new AMap.Size(23, 29),? //圖標(biāo)大小
? ? ? ? ? ? imageSize: new AMap.Size(23,29)
? ? ? ? }),
? ? ? ? position:new AMap.LngLat(j,w) //標(biāo)注位置（經(jīng)緯度）
? ? });
? ? marker.setMap(map);? //在地圖上添加點(diǎn)
? ? //鼠標(biāo)點(diǎn)擊marker彈出自定義的信息窗體
? ? AMap.event.addListener(marker, 'click', function() {
? ? ? ? infoWindow.open(map, marker.getPosition());
? ? });
}
?addMarker(116.397428, 39.90923); ? //實(shí)例化
//!!!!!!以下是添加更多詳盡信息。。（還有更多，請(qǐng)看高德API）
// // addMarker(116, 39);
// //添加窗體信息
// //實(shí)例化信息窗體
// var content = [];
// content.push("地址：北京市朝陽區(qū)阜通東大街6號(hào)院3號(hào)樓東北8.3公里");
// var infoWindow = new AMap.InfoWindow({
// ? ? isCustom: true,? //使用自定義窗體
// ? ? content: createInfoWindow(content.join("<br/>")),
// ? ? offset: new AMap.Pixel(110, -5)
// });
//
// //構(gòu)建自定義信息窗體
// function createInfoWindow( content) {
// ? ? var info = document.createElement("div");
// ? ? info.className = "info";
// ? ? // 定義中部?jī)?nèi)容
// ? ? var middle = document.createElement("div");
// ? ? middle.className = "info-middle";
// ? ? middle.style.backgroundColor = 'white';
// ? ? middle.innerHTML = content;
// ? ? info.appendChild(middle);
//
// ? ? // // // // 定義底部?jī)?nèi)容
// ? ? 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>
記得要自己申請(qǐng)key值才可以。
移動(dòng)端呢，其實(shí)調(diào)用高德地圖是十分有限制的，首先要確保用戶手機(jī)安裝了高德地圖的軟件（一般人都會(huì)安裝地圖，百度或高德，我想應(yīng)該是可以獲取手機(jī)信息判斷有哪個(gè)地圖軟件再去調(diào)用！），如果沒有調(diào)用也看不到啊，其次移動(dòng)端的調(diào)用前端也只能實(shí)現(xiàn)到地圖的展示打點(diǎn)了，因?yàn)楦叩碌貓DAPI說的很清楚，后端的java或者oc給了接口，前端的小伙伴可謂是有心無力啦，希望不久的將來前端可以自由調(diào)用吧。
轉(zhuǎn)載于:https://www.cnblogs.com/lichunjing/p/7060093.html
總結(jié)
以上是生活随笔為你收集整理的高德地图调用和添加标注的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过使用CSS字体阴影效果解决hover
- 下一篇： 女人梦到特别想要是什么意思