摘要:高德地圖入門四地圖覆蓋物覆蓋物類名說(shuō)明是否插件點(diǎn)標(biāo)記否覆蓋物點(diǎn)標(biāo)記復(fù)雜點(diǎn)標(biāo)記對(duì)象,對(duì)普通點(diǎn)標(biāo)記的擴(kuò)展否覆蓋物折線否覆蓋物多邊形否覆蓋物圓否圖片覆蓋物否地圖右鍵菜單否點(diǎn)標(biāo)記預(yù)覽自定義點(diǎn)標(biāo)記預(yù)覽多邊形預(yù)覽右鍵菜單添加右鍵菜單內(nèi)容項(xiàng)放大縮小添加
高德地圖 Javascript API 入門(四) 地圖覆蓋物 覆蓋物
類名 | 說(shuō)明 | 是否插件 |
---|---|---|
AMap.Marker | 點(diǎn)標(biāo)記 | 否 |
AMap.Icon | 覆蓋物>點(diǎn)標(biāo)記>復(fù)雜點(diǎn)標(biāo)記對(duì)象,對(duì)普通點(diǎn)標(biāo)記Marker 的擴(kuò)展 | 否 |
AMap.Polyline | 覆蓋物>折線 | 否 |
AMap.Polygon | 覆蓋物>多邊形 | 否 |
AMap.Circle | 覆蓋物>圓 | 否 |
AMap.GroundImage | 圖片覆蓋物 | 否 |
AMap.ContextMenu | 地圖右鍵菜單 | 否 |
var marker=new AMap.Marker({ map:map, position:new AMap.LngLat(112.736465,37.696495) });
預(yù)覽
自定義點(diǎn)標(biāo)記
JS
var marker=new AMap.Marker({ map:map, position:new AMap.LngLat(112.736465,37.696495), icon:new AMap.Icon({ image:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2803620233,1906638381&fm=23&gp=0.jpg", size:[72,72], imageSize:[36,36] }), draggable:true, raiseOnDrag:true, shape:new AMap.MarkerShape({ type:"circle", coords:[112.736465,37.696495,100] }), label:{ content:"label", offset:new AMap.Pixel(0,-36) } });
預(yù)覽
JS
var lineArr=[ [112.49157,37.897392], [112.602806,37.898747], [112.608643,37.797355], [112.49775,37.79627] ]; var polygon=new AMap.Polygon({ map:map, path:lineArr });
預(yù)覽
右鍵菜單JS
var contextmenu=new AMap.ContextMenu(); var pos=[]; // 添加右鍵菜單內(nèi)容項(xiàng) contextmenu.addItem("放大",function () { map.zoomIn(); },0); contextmenu.addItem("縮小",function () { map.zoomOut(); },1); contextmenu.addItem("添加點(diǎn)標(biāo)記",function () { var marker=new AMap.Marker({ map:map, position:pos }); },2); // 監(jiān)聽鼠標(biāo)右擊事件 map.on("rightclick",function (e) { contextmenu.open(map,e.lnglat); pos=e.lnglat; });
預(yù)覽
信息窗體 信息窗體JS
var infowindow=new AMap.InfoWindow({ isCustom:false, content:"Hello,Yuanping
", offset:new AMap.Pixel(0,-36), showShadow:true, closeWhenClickMap:true, autoMove:true }); infowindow.open(map,new AMap.LngLat(112.736465,38.696495));
預(yù)覽
小練習(xí) 鼠標(biāo)劃過(guò)山西大劇院時(shí),彈出信息窗體JS
// 坐標(biāo) var lineArr=[ [112.532802,37.808395], [112.533049,37.808395], [112.533124,37.808476], [112.533521,37.808459], [112.533558,37.808391], [112.533832,37.808391], [112.533848,37.80792], [112.534159,37.807959], [112.534159,37.80748], [112.533826,37.807514], [112.533832,37.807179], [112.533966,37.806848], [112.533376,37.806683], [112.533054,37.806687], [112.532684,37.806878], [112.53278,37.807191], [112.532796,37.80745], [112.532013,37.807285], [112.532019,37.808213], [112.532796,37.808018], [112.532818,37.808412] ]; // 實(shí)例化Polygon類 var polygon=new AMap.Polygon({ map:map, path:lineArr }); // 適應(yīng)窗口 map.setFitView(); // 實(shí)例化信息窗體類 var infowindow=new AMap.InfoWindow({ content:"太原市
山西大劇院
", closeWhenClickMap:true }); // 監(jiān)聽鼠標(biāo)移入、移除事件 polygon.on("mouseover",function (e) { infowindow.open(map,map.getCenter()); }).on("mouseout",function () { infowindow.close(); });
預(yù)覽
參考來(lái)源:http://lbs.amap.com/
作者:Yangfan
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/81678.html
摘要:高德地圖入門一準(zhǔn)備工作首先注冊(cè)個(gè)開發(fā)者賬號(hào)然后創(chuàng)建應(yīng)用,獲取新建文件,在標(biāo)簽中引入如下代碼把你的值填入即可您申請(qǐng)的值創(chuàng)建設(shè)置地圖容器地圖初始化創(chuàng)建地圖設(shè)置地圖參數(shù)可以通過(guò)以下設(shè)置也可通過(guò)對(duì)象的方法設(shè)置預(yù)覽個(gè)性化地圖改變地圖樣式目前支持五種地 高德地圖 Javascript API 入門(一) 準(zhǔn)備工作 首先注冊(cè)個(gè)開發(fā)者賬號(hào) showImg(https://segmentfault.co...
摘要:鼠標(biāo)在地圖上拉框即可繪制相應(yīng)的矩形。鼠標(biāo)在地圖上單擊繪制量測(cè)區(qū)域,鼠標(biāo)左鍵雙擊或右鍵單擊結(jié)束當(dāng)前量測(cè)操作,并顯示本次量測(cè)結(jié)果。參數(shù)設(shè)為時(shí),鼠標(biāo)操作關(guān)閉的同時(shí)清除地圖上繪制的所有覆蓋物對(duì)象設(shè)為時(shí),保留所繪制的覆蓋物對(duì)象。 高德地圖 Javascript API 入門(二) 鼠標(biāo)工具插件 測(cè)量距離 JS map.plugin([AMap.MouseTool],function ()...
摘要:高德地圖入門七熱力圖插件簡(jiǎn)單例子顯示地圖坐標(biāo)點(diǎn)加載熱力圖插件預(yù)覽參數(shù)構(gòu)造函數(shù)說(shuō)明構(gòu)造一個(gè)熱力圖插件對(duì)象,為要疊加熱力圖的地圖對(duì)象,屬性參考列表中的說(shuō)明。 高德地圖 Javascript API 入門(七) 熱力圖插件 簡(jiǎn)單例子 // 顯示地圖 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....
摘要:高德地圖入門六出行規(guī)劃公交路徑公交換乘服務(wù),提供起終點(diǎn)公交路線規(guī)劃服務(wù),整合步行方式初始化加載公交線路插件實(shí)例化北京必須值,搭乘公交所在城市可選值,搜索結(jié)果的標(biāo)注線路等均會(huì)自動(dòng)添加到此地圖上可選值,顯示搜索列表的容器可選值,詳細(xì)信息駕駛策略 高德地圖 Javascript API 入門(六) 出行規(guī)劃 公交路徑 公交換乘服務(wù),提供起、終點(diǎn)公交路線規(guī)劃服務(wù),整合步行方式 初始化 // 加...
摘要:高德地圖入門三距離測(cè)量插件區(qū)別雖然鼠標(biāo)工具插件也提供距離量測(cè)功能,但是距離量測(cè)插件,提供更為豐富的樣式設(shè)置功能。 高德地圖 Javascript API 入門(三) 距離測(cè)量插件 區(qū)別 雖然鼠標(biāo)工具插件也提供距離量測(cè)功能,但是距離量測(cè)插件,提供更為豐富的樣式設(shè)置功能。 加載插件 JS map.plugin([AMap.RangingTool],function () { ...
閱讀 3302·2023-04-26 02:42
閱讀 803·2021-10-09 09:41
閱讀 3251·2021-09-06 15:02
閱讀 760·2019-08-26 10:45
閱讀 493·2019-08-23 15:53
閱讀 752·2019-08-22 18:10
閱讀 560·2019-08-22 18:01
閱讀 3526·2019-08-22 17:34