摘要:高德地圖入門一準(zhǔn)備工作首先注冊個開發(fā)者賬號然后創(chuàng)建應(yīng)用,獲取新建文件,在標(biāo)簽中引入如下代碼把你的值填入即可您申請的值創(chuàng)建設(shè)置地圖容器地圖初始化創(chuàng)建地圖設(shè)置地圖參數(shù)可以通過以下設(shè)置也可通過對象的方法設(shè)置預(yù)覽個性化地圖改變地圖樣式目前支持五種地
高德地圖 Javascript API 入門(一) 準(zhǔn)備工作 首先注冊個開發(fā)者賬號 然后創(chuàng)建應(yīng)用,獲取Key 新建HTML文件,在body標(biāo)簽中引入如下代碼(把你的Key值填入即可)
HTML
創(chuàng)建設(shè)置地圖容器
HTML
CSS
#container {width:300px; height: 180px; }地圖初始化 創(chuàng)建地圖
JS
var map = new AMap.Map("container");設(shè)置地圖參數(shù)
可以通過以下設(shè)置
JS
var map = new AMap.Map("container",{ zoom: 12, center: [112.549248,37.852135] });
也可通過map對象的方法設(shè)置
JS
var map = new AMap.Map("container"); map.setZoom(12); map.setCenter([112.549248,37.852135]);
預(yù)覽
個性化地圖 改變地圖樣式目前支持五種地圖配色模版
地圖類型列表
名稱 | 說明 |
---|---|
normal | 默認(rèn)樣式 |
dark | 深色樣式 |
blue_night | 夜空藍(lán)樣式 |
fresh | 淺色樣式 |
light | osm清新風(fēng)格樣式 |
var map = new AMap.Map("container", { resizeEnable: true, mapStyle:"fresh", center: [116.408075, 39.950187] });
也可以這樣設(shè)置
JS
map.setMapStyle("fresh");
預(yù)覽
顯示指定地圖內(nèi)容(地圖要素)名稱 | 說明 |
---|---|
bg | 背景地圖 |
point | 興趣點 |
road | 道路 |
building | 建筑 |
map.setFeatures("road");//單一種類要素顯示 map.setFeatures(["road","point"])//多個種類要素顯示
預(yù)覽(只顯示道路要素的地圖)
地圖控件JavaScript API提供了工具條、比例尺、定位、鷹眼、基本圖層切換等常用的控件
名稱 | 類名 | 簡介 |
---|---|---|
工具條 | ToolBar | 集成了縮放、平移、定位等功能按鈕在內(nèi)的組合控件 |
比例尺 | Scale | 展示地圖在當(dāng)前層級和緯度下的比例尺 |
定位 | Geolocation | 用來獲取和展示用戶主機所在的經(jīng)緯度位置 |
鷹眼 | OverView | 在地圖右下角顯示地圖的縮略圖 |
類別切換 | MapType | 實現(xiàn)默認(rèn)圖層與衛(wèi)星圖、實施交通圖層之間切換的控 |
map.plugin(["AMap.ToolBar"],function () { map.addControl(new AMap.ToolBar()); // 工具條控件 });
(其他控件添加方式同上)
預(yù)覽(帶有工具條控件的地圖)
參考來源:http://lbs.amap.com/
作者:Yangfan
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81682.html
摘要:鼠標(biāo)在地圖上拉框即可繪制相應(yīng)的矩形。鼠標(biāo)在地圖上單擊繪制量測區(qū)域,鼠標(biāo)左鍵雙擊或右鍵單擊結(jié)束當(dāng)前量測操作,并顯示本次量測結(jié)果。參數(shù)設(shè)為時,鼠標(biāo)操作關(guān)閉的同時清除地圖上繪制的所有覆蓋物對象設(shè)為時,保留所繪制的覆蓋物對象。 高德地圖 Javascript API 入門(二) 鼠標(biāo)工具插件 測量距離 JS map.plugin([AMap.MouseTool],function ()...
摘要:高德地圖入門七熱力圖插件簡單例子顯示地圖坐標(biāo)點加載熱力圖插件預(yù)覽參數(shù)構(gòu)造函數(shù)說明構(gòu)造一個熱力圖插件對象,為要疊加熱力圖的地圖對象,屬性參考列表中的說明。 高德地圖 Javascript API 入門(七) 熱力圖插件 簡單例子 // 顯示地圖 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....
摘要:高德地圖入門六出行規(guī)劃公交路徑公交換乘服務(wù),提供起終點公交路線規(guī)劃服務(wù),整合步行方式初始化加載公交線路插件實例化北京必須值,搭乘公交所在城市可選值,搜索結(jié)果的標(biāo)注線路等均會自動添加到此地圖上可選值,顯示搜索列表的容器可選值,詳細(xì)信息駕駛策略 高德地圖 Javascript API 入門(六) 出行規(guī)劃 公交路徑 公交換乘服務(wù),提供起、終點公交路線規(guī)劃服務(wù),整合步行方式 初始化 // 加...
摘要:高德地圖入門三距離測量插件區(qū)別雖然鼠標(biāo)工具插件也提供距離量測功能,但是距離量測插件,提供更為豐富的樣式設(shè)置功能。 高德地圖 Javascript API 入門(三) 距離測量插件 區(qū)別 雖然鼠標(biāo)工具插件也提供距離量測功能,但是距離量測插件,提供更為豐富的樣式設(shè)置功能。 加載插件 JS map.plugin([AMap.RangingTool],function () { ...
摘要:高德地圖入門五搜索服務(wù)搜索服務(wù)名稱說明是否插件輸入提示,根據(jù)輸入關(guān)鍵字提示匹配信息是地點搜索服務(wù)插件,提供某一特定地區(qū)的位置查詢服務(wù)是麻點圖插件,提供海量搜索結(jié)果的輔助顯示功能是行政區(qū)查詢服務(wù),提供行政區(qū)相關(guān)信息是公交路線服務(wù),提供公交路線 高德地圖 Javascript API 入門(五) 搜索服務(wù) 搜索服務(wù) 名稱 說明 是否插件 AMap.Autocomplete 輸入提示...
閱讀 1906·2021-11-22 14:44
閱讀 1672·2021-11-02 14:46
閱讀 3657·2021-10-13 09:40
閱讀 2599·2021-09-07 09:58
閱讀 1586·2021-09-03 10:28
閱讀 1658·2019-08-29 15:30
閱讀 976·2019-08-29 15:28
閱讀 1468·2019-08-26 12:20