要求:
1.為地圖任意設置一個中心點和地圖顯示級別 ,並在中心點添加一個標記。
2.為鼠標設置一個小手狀的樣式 。
3.為地圖綁定點擊事件 ,在點擊的地方添加一個標記 ,同時要把之前的標記清除。
( 具體效果查看效果視頻 )
任務(步驟):
1使用new AMap.Map()創建一個地圖。
2. 為地圖任意設置一個中心點和地圖顯示級別,並使用AMap.Marker()方法在地圖中心點添加一個標記
3. 使用setDefaultCursor方法為鼠標設置一個小手狀的樣式
4.為地圖綁定點擊事件 ,在點擊的地方添加一個標記 ,同時要把之前的標記使用map.remove()方法清除。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> <title>5-4添加標記練習</title> <style> *{ padding: 0; margin: 0; } #container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <script> var map = new AMap.Map('container',{ zoom:10, center:[116.379391,39.861536] }); map.setDefaultCursor('pointer'); var marker = new AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', position:[116,39] }) map.on('click',function(e){ map.remove([marker]) marker = new AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', position:[e.lnglat.lng,e.lnglat.lat], offset:new AMap.Pixel(-10,-20) }); map.add([marker]); }) </script> </body> </html>