web開發如何使用高德地圖API（四）經過AMap.Marker自定義標點

時間 2019-11-08

標籤 web 開發如何使用地圖 api 經過 amap.marker amap marker 自定義標點欄目 HTML 简体版

原文原文鏈接

說兩句：javascript

如下內容除了我本身寫的部分，其餘部分在高德開放平臺都有（可點擊外鏈訪問）。
我所整理的內容以實際項目爲基礎但願更有針對性的，更精簡。
點擊直奔主題。

準備工做：css

首先，註冊開發者帳號，成爲高德開放平臺開發者
登錄以後，在進入「應用管理」頁面「建立新應用」
爲應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」

拿到key以後，在頁面引入高德API和UI組件庫以及相關CSS文件java

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告訴你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

顯示基礎地圖所用到的HTML和JSweb

<body>
<div id="container"></div>
</body>

<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true, zoom:11, center: [116.397428, 39.90923]//默認的地圖中心經緯度  }); </script>

引入高德地圖工具包js文件api

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

在map中指定的經緯度上描點
app

//建立一個Marker實例：
var markerTemp = new AMap.Marker({

    position : [lng,lat],
    offset : new AMap.Pixel(-21,-21),//偏移量，默認以marker左上角位置爲基準點
    map : map
});
// 自定義點標記內容（已設置頭像顯示在描點位置爲例）
var markerContent = document.createElement("div");
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";//設置描點img的統同樣式
markerImg.src = path + data[0][i].userId.headSculpture;//設置圖片url
markerContent.appendChild(markerImg);
markerTemp.setContent(markerContent);

在已有地圖上添加與刪除Marker工具

// 將建立的點標記添加到已有的地圖實例：
map.add(marker);

// 移除已建立的 marker
map.remove(marker);

點擊查看Marker的所有屬性和方法ui

監聽Marker的點擊事件url

　　下回再說es5

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。