取高德地圖key

進入高德地圖開放平臺，注冊高德地圖賬號、登陸、認證為開發者，然后進入個人控制臺、創建新應用，在創建的應用上點擊“添加key”按鈕。

這里我們需要用到的高德地圖的JavaScript API ，所以點擊添加按鈕后我們選擇Web 服務的JS API如圖

底圖切換與圖層顯示

功能實現

利用高德地圖提供的JavaScript API 加載底圖，同時增加一個新的地圖控件來把原有的標準底圖切換到衛星影像底圖，方便了用戶根據自己的實際需要能夠加載恰當的背景地圖，當用戶點擊對應的衛星圖層時，底圖會切換為衛星影像圖，再點擊圖標，底圖會切換為原來的標準底圖。同時加入圖層顯示插件，可以在任一底圖之上顯示路況路網圖層。

• 關鍵代碼

// 定義一個變量來引入衛星底圖API
 var satellite = new AMap.TileLayer.Satellite({
 map: map,
 zIndex: 2,
 zooms: [3, 18]
 })
 // 點擊按鈕實現切換衛星底圖，再點擊就關閉衛星底圖。
 document.getElementById('btn5').onclick = function() {
 if (this.innerText === '衛星') {
 this.style.backgroundColor = "skyblue"
 this.innerText = '地圖'
 satellite.show()
 } else if (this.innerText === '地圖') {
 this.style.backgroundColor = "white"
 this.innerText = '衛星'
 satellite.hide()
 } 

• 運行結果

設計方法

判斷當用戶點擊按鈕，按鈕名稱為衛星時，底圖切換為衛星圖層也就是衛星圖層變量satellite調用show（）方法顯示，同時按鈕名稱變為地圖，當按鈕名稱為地圖時，鼠標點擊，底圖會切換為標準底圖，這是satellite調用hide（）方法隱藏。而在后續更是可以通過加載插件AMap.MapType來增加圖層顯示功能，無論是在標準底圖和衛星底圖為當前地圖都可以在之上顯示路況圖層或者路網圖層。兩者也可以同時顯示，高德地圖已經把這個功能封裝進AMap.MapType插件了，當我們需要的時候引用此插件即可。

天氣查詢

功能實現

點擊按鈕獲得當地當前的天氣情況以及未來四天的天氣預報顯示在界面右上角部分，讓用戶比較簡單的獲取想要的天氣咨詢。

關鍵代碼

var city // 定義一個變量來接收當前地圖中心點所在城市
 map.getCity(function (data) {
 city = data.city
 })
AMap.plugin('AMap.Weather', function() {
 var weather = new AMap.Weather()
 //根據上面獲取到的當前城市名稱city來搜索當前天氣
 weather.getLive(city, function(err, data) {
 if (!err) {
 var str = []
 str.push('<h4 >實時天氣' + '</h4><hr>')
 str.push('<p>城市/區：' + data.city + '</p>')
 str.push('<p>天氣：' + data.weather + '</p>')
 str.push('<p>溫度：' + data.temperature + '℃</p>')
 str.push('<p>風向：' + data.windDirection + '</p>')
 str.push('<p>風力：' + data.windPower + ' 級</p>')
 str.push('<p>空氣濕度：' + data.humidity + '</p>')
 str.push('<p>發布時間：' + data.reportTime + '</p>')
 marker = new AMap.Marker({
 map: map,
 position: map.getCenter()
 })
 var infoWin = new AMap.InfoWindow({
 content: '<div id="weatherShow2" class="info" style="position:inherit;margin-bottom:0;">' + str.join('') + '</div><div class="sharp"></div>',
 isCustom: true,
 offset: new AMap.Pixel(0, -37)
 })
 infoWin.open(map, marker.getPosition())
 marker.on('mouseover', function() {
 infoWin.open(map, marker.getPosition())
 })
 }
 }) 

• 運行結果

設計方法

判斷當用戶點擊按鈕，按鈕名稱為天氣查詢時，使用變量weather來引用API天氣插件AMap.Weather然后調用其中的getLive方法，此方法需要傳入一個地點參數作為查詢地點才能得到目標地點結果，所以我在運行這個代碼之前先定義一個city變量，為這個變量賦值，值為map.getCity方法得到的當前城市地點名稱。 傳入city函數調用方法會得到當前地點的天氣咨詢，但是都是數據類型，我們需要把這些數據圖像化呈現出來，所以之后代碼就是把得到的查詢結果放置在相應的中文結果名稱上，再以可視化顯示到界面上。這樣就完成了天氣查詢功能了。 另外，為了優化用戶體驗，可以添加一個普通的點標記來記錄當前地圖中心點并把得到的結果顯示在此標記上面，這樣我們再后續移動頁面的時候不會對結果造成遮擋。 此外，天氣查詢功能還增加了查詢未來4天天氣預報的功能，也是通過變量weather來調用getForecast方法來獲取結果并顯示在界面上，原理同上。

距離測量

功能實現

點擊按鈕實現進入距離測量功能，鼠標左鍵點擊起始點，確定位置留下一個記號N，再點擊下一個點得到兩個點之前的直線物理距離，單位為公里（km），此時距離測量功能還沒結束，還可以點擊下一個地點得到三個點之間的直線距離總和，以此類推，可以供用戶測量多個點的總和長度和每兩個點之間的長度。按右鍵結束當前測量。

關鍵代碼

var ruler // 定義一個變量來接收距離測量插件
 map.plugin(["AMap.RangingTool"], function() {
 ruler = new AMap.RangingTool(map)
 })
 document.getElementById('btn3').onclick = function() {
 console.dir(this)
 if (this.innerText === '距離測量') {
 this.style.backgroundColor = "skyblue"
 this.innerText = '關閉測量'
 ruler.turnOn()
 } else if (this.innerText === '關閉測量') {
 this.style.backgroundColor = "white"
 this.innerText = '距離測量'
 ruler.turnOff()
 }
 }
復制代碼

• 運行結果

設計方法

判斷當用戶點擊按鈕，按鈕名稱為距離測量時，通過定義新的變量ruler來引入API距離測量插件AMap.RangingTool(map)，來調用其封裝的turnOn方法進入測量模式。 這里需要注意的是跟底圖切換功能不同，這里引入API時需要傳入當前地圖對象map，因為該功能時需要對整個地圖對象map進行一個操作調用方法實現的功能，進入測量模式后點擊多個地方測量各個地點的距離和總和距離。通過用戶點擊鼠標右鍵來結束當前這一次的距離測量，但是需要注意的是此時還沒有退出距離測量模式，這時再點擊鼠標左鍵的話會進行新的距離測量方法。 所以為了提高用戶體驗，在原按鈕上也應該增加點擊按鈕徹底退出距離測量模式的功能，此方法原理同底圖切換功能，這里不再贅述。

輸入提示與POI搜索

功能實現

用戶在地點查詢搜索框中輸入地點名稱時，搜索框會自動根據用戶當前輸入的地點自動生成關鍵地點提示，并以列表的形式展現在輸入框下面，可以讓用戶不必輸入完整的地點就可以之間看到可能出現匹配的目的地地點。 當用戶點擊出現的匹配列表中的某一個具體地點時，則代表用戶需要搜索這個地點的所在位置和相關信息，界面應該跳轉到用戶輸入的地點，并且如果通過POI搜索得到多個結果，界面應該縮小到可以同時顯示多個相關地點的程度來讓用戶更加直觀的看到搜索結果。 如果POI搜索結果出現多個匹配的地點，需要在搜索框下面呈現這些匹配的地點并以列表圖像化的形式出現在界面上，當用戶點擊某個匹配的地點的時候，界面應該跳到用戶點擊地點的所在位置并根據目標所占面積放大或縮小到適當的程度。

• 關鍵代碼

// 定義變量來接收指定搜索框用戶輸入的地點，下面的變量tipinput是指頁面元素輸入框的id值，以此來接收用戶在特點輸入框輸入的內容。
 var autoOptions = {
 input: "tipinput"
 }
 var auto = new AMap.Autocomplete(autoOptions)
 // ===========================================================數據展示
 var placeSearch = new AMap.PlaceSearch({
 pageSize: 5, // 單頁顯示結果總條數
 pageIndex: 1, // 頁碼
 panel: "panel", // 結果列表將在此容器中進行展示
 city: "010", // 興趣點城市
 citylimit: true, //是否強制限制在設置的城市內搜索
 map: map, // 展現結果的當前地圖對象
 autoFitView: true // 選擇是否自動調整當前地圖視野來使繪制的 Marker點都處于當前視口的可見范圍內
 }) // 構造地點查詢類
 AMap.event.addListener(auto, "select", select) //注冊監聽，當選中匹配地點時會觸發
 function select(e) {
 placeSearch.setCity(e.poi.adcode); //設置當前城市編碼查詢
 placeSearch.search(e.poi.name); //關鍵字查詢查詢
 } 

• 運行結果
• 輸入提示

• 
  
• POI搜索

設計方法

輸入提示與POI搜索功能其實非常巧妙的用到了兩個功能的API組合來完成。因為地點查詢功能是用戶使用地圖的時候最常見也是最重要的功能，所以我們一般把輸入框放在界面上，可以適當的通過CSS類樣式做一點的美化。重點是利用輸入框的ID值來記錄用戶的輸入內容才能完成下面兩個插件的功能。 為了提升用戶體驗，系統應該充分利用地圖關鍵點數據庫，在日常使用地圖的情況下，當用戶想要搜索某個地點的時候，往往會遇到目標地點名稱過長或者忘記了目標地點的完整名稱時，輸入提示功能就有著極高的使用率和十分良好的使用體驗，當用戶輸入目標地點前幾個名稱的時候，系統會根據地圖關鍵點數據庫來查詢當中是否有與用戶輸入部分名稱匹配的地點，再把這些地點以列表的形式展示給用戶看，整個過程都不影響用戶的正常輸入。 也就是說，在不影響用戶輸入的情況下，給用戶提供一個可供參考的地點來提高用戶選擇地點的準確性。同時，用戶打字輸入名稱一般都是很快的，時間可以以秒位單位，為了提高搜索數據庫的效率，可以給自動輸入設定限定城市搜索，不過為了提高數據的范圍性，本系統還是使用全國的范圍進行搜索目的來提示用戶。 為了接收到HTML界面用戶在輸入框輸入的地點名稱，我們先定義一個變量autoOptions來根據輸入框的ID值來接收用戶在此輸入框輸入的內容。然后定義一個新變量auto引用API輸入提示AMap.Autocomplete(autoOptions)，傳入剛才的變量，根據這個變量得到的內容查詢數據庫并把得到的結果呈現在輸入框下方。

這時，為輸入提示列表中的每一條數據都綁定一個監聽事件，通過上面的代碼可以看到當用戶選擇列表中的某條數據的時候，會觸發預先封裝好的select 方法，而select方法的功能就是POI搜索功能。 定義一個變量placeSearch引用POI搜索API AMap.PlaceSearch。在引用的同時可以給這個POI搜索API功能設置相應的屬性，比如本系統設置pageSize為5意思是查詢到的數據會以每頁5條數據展示出來，citylimit為true則表示在當前城市進行POI搜索，panel的值表示呈現結果的容器應該放到界面的哪一個元素內，這個容器需要在HTML頁面中預先設置好標簽ID值來呈現結果。其他屬性可以看上面代碼或者在API參考手冊中自己查看，每一個屬性都有其意義和重要性所在。 觸發POI搜索功能后得到的具體地點結果會呈現到panel屬性中，系統可以對這個容器做相應的CSS樣式調整來讓界面更加易用，此時得到結果的同時，地圖界面會移動到搜索結果所在地。如果通過POI搜索得到多個地點，因為我們在引用此API時設置了其屬性autoFitView的值為true，那么界面會調整視野把所有搜索到的地點呈現在當前窗口可見范圍內。這個功能對于有多個出入口和停車場的大型建筑或者設施非常方便，如學校、購物廣場等。當然更多的是在搜索一個城市的連鎖店上比較常見，如KFC，金拱門等。

梅州公交線路查詢

功能實現 點擊按鈕實現查詢梅州市公交某一路的路線圖，默認查詢梅州公交5路，用戶可以在下面出現的查詢框中輸入想要查詢的公交路線圖。

關鍵代碼

var linesearch
 var busLineName
 /*公交線路查詢*/
 function lineSearch() {
 busLineName = document.getElementById('BusLineName').value
 document.getElementById('input-card').style.display = "block"
 console.log(busLineName)
 if (!busLineName) return
 //定義變量先實例化公交線路查詢，然后選擇取回一條路線
 if (!linesearch) {
 linesearch = new AMap.LineSearch({
 pageIndex: 1,
 city: '梅州',
 pageSize: 1,
 extensions: 'all'
 })
 }
 //搜索“5”相關公交線路
 linesearch.search(busLineName, function (status, result) {
 map.clearMap()
 if (status === 'complete' && result.info === 'OK') {
 lineSearch_Callback(result)
 } else {
 alert(result)
 }
 })
 }
 function lineSearch_Callback(data) {
 var lineArr = data.lineInfo
 var lineNum = data.lineInfo.length
 if (lineNum == 0) {} else {
 for (var i = 0; i < lineNum; i++) {
 var pathArr = lineArr[i].path;
 var stops = lineArr[i].via_stops;
 var startPot = stops[0].location;
 var endPot = stops[stops.length - 1].location;
 if (i == 0) //作為示例，只繪制一條線路
 drawbusLine(startPot, endPot, pathArr);
 }
 }
 }
 /*繪制路線*/
 function drawbusLine(startPot, endPot, BusArr) {
 //繪制起點，終點
 new AMap.Marker({
 map: map,
 position: startPot, //基點位置
 icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
 zIndex: 10
 })
 new AMap.Marker({
 map: map,
 position: endPot, //基點位置
 icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
 zIndex: 10
 })
 //繪制乘車的路線
 busPolyline = new AMap.Polyline({
 map: map,
 path: BusArr,
 strokeColor: "#09f", //線顏色
 strokeOpacity: 0.8, //線透明度
 isOutline: true,
 outlineColor: '#C4C4C4',
 strokeWeight: 6 //線寬
 })
 map.setFitView()
 }
 document.getElementById('search').onclick = lineSearch
 document.getElementById('btn7').onclick = function () {
 if (this.innerText === '公交查詢') {
 this.style.backgroundColor = "skyblue"
 this.innerText = '關閉查詢'
 lineSearch()
 } else if (this.innerText === '關閉查詢') {
 this.style.backgroundColor = "#C4C4C4"
 this.innerText = '公交查詢'
 document.getElementById('input-card').style.display = "none"
 map.clearMap()
 }
 } 
復制代碼

• 運行結果

• 設計方法

用戶點擊按鈕，系統會預先將設定的好梅州公交5路呈現給用戶，先獲取路線路的所有路線，再將路線繪制成路線圖，并同時加入起點和終點的標志，下面的查詢框中的查詢按鈕也通過onclick綁定了查詢功能。讓用戶能夠自己選擇查詢某條路線來選擇查詢的路線。

右鍵菜單

• 功能實現

在日常使用地圖的時候，用戶一般的操作就只有鼠標拖拽，左鍵點擊，右鍵菜單了，可以說鼠標的右鍵菜單功能是很重要的一個功能，我們可以在菜單中設置一些比較實用的功能，如放大、縮小、設置起點、途徑點、終點以及添加標記等等，所以這個功能的重點不是其中某一個功能，而是實現右鍵打開的菜單中出現我們想要的功能，同時，為這些菜單上的選項綁定我們需要的功能才是最重要的。

• 關鍵代碼

 // =====================================================自定義右鍵菜單類
 var menu = new ContextMenu(map)
 function ContextMenu(map) {
 var me = this
 // 地圖中添加鼠標工具MouseTool插件
 this.mouseTool = new AMap.MouseTool(map)
 this.contextMenuPositon = null
 var content = [] // 創建一個容器來設置右鍵菜單的樣式
 content.push("<div class='info context_menu'>")
 content.push(" <p onclick='menu.zoomMenu(0)'>縮小</p>")
 content.push(" <p class='split_line' onclick='menu.zoomMenu(1)'>放大</p>")
 content.push(" <i class='menu-icon menu-icon-from'></i><p onclick='menu.addOrigin()'>設為起點</p>")
 content.push(" <p onclick='menu.addWaypoints()'>設為途經點</p>")
 content.push(" <p onclick='menu.addDestination()'>設為終點</p>")
 content.push(" <p onclick='menu.addMarkerMenu()'>添加標記獲取經緯度</p>")
 content.push("</div>")
 // 通過content自定義右鍵菜單內容
 this.contextMenu = new AMap.ContextMenu({
 isCustom: true,
 content: content.join('')
 })
 //地圖map綁定鼠標右擊事件——彈出右鍵菜單
 map.on('rightclick', function(e) {
 me.contextMenu.open(map, e.lnglat)
 me.contextMenuPositon = e.lnglat //右鍵菜單出現的位置
 })
 }
 ContextMenu.prototype.zoomMenu = function zoomMenu(tag) { // 右鍵菜單縮放地圖
 if (tag === 0) {
 map.zoomOut()
 }
 if (tag === 1) {
 map.zoomIn()
 }
 this.contextMenu.close()
 }
復制代碼

• 運行結果

• 設計方法

高德地圖的右鍵菜單API不需要引入插件，直接定義一個變量引用API右鍵菜單AMap.ContextMenu（map）傳入一個地圖對象就可以了，這樣我們地圖有可以出現一個菜單列表，但是按照我們普通用戶的實用習慣一般都是通過點擊鼠標右鍵來生成這個菜單，所以本系統還需要定義一個變量mouseTool來引用一個API鼠標工具AMap.MouseTool（map）。 這里本系統通過DOM操作的方式來設置右鍵菜單的文字內容和CSS樣式，所以定義一個變量content通過push方法來不斷添加需要的功能名稱，這里的重點是通過DOM操作可以給這些功能都增加一個點擊事件oncilck的名稱。然后再為這個菜單的出現位置綁定一個地圖右鍵事件，當通過地圖對象map的on事件綁定，使用其參數(e）來獲取鼠標當前位置的經緯度lnglat。通過上面一系列設置能夠實現用戶在地圖任一地點點擊鼠標右鍵能讓右鍵的菜單正確的出現在用戶點擊的地方。

因為這個功能涉及的方法很多，所以本系統采用重新封裝一個新的構造函數ContextMenu（map）為后面綁定菜單各自功能的操作更加方便。 這里我們以右鍵縮放地圖功能為例，通過ContextMenu.protorype.zoomMenu也就是給這個構造函數的原型prototype添加一個方法屬性zoomMenu來封裝縮放功能的方法，通過這個方法使用一個參數（tag）來判斷用戶點的是放大還是縮小，這里就需要上文所說的onclick事件，在設置右鍵菜單中的放大、縮小兩個名稱菜單的同時給他們綁定好了onclick事件，點擊就調用zoomMenu（tag）方法，參數上本系統選擇0為放大，1為縮小，最后不要忘記點擊事件后要使用close方法把右鍵菜單關閉。

添加標記獲取經緯度

• 功能實現

在上文通過封裝一個新的構造函數ContextMenu來初始化了右鍵菜單，那么添加標記功能也可以通過右鍵菜單來執行，獲取目標點經緯度是用戶使用地圖很常用的一個功能，地圖上的每一個點都可以通過經緯度來表達其所在位置，所以本系統通過要讓用戶在目標點右鍵出現菜單中選擇添加標記獲取經緯度功能來獲取目的點的經緯度并以數據的形式直接展現在點標記上面。

• 關鍵代碼

//=========================封裝獲取當前經緯度方法
 function getLngLat() {
 var lnglatInput = document.getElementById('lnglat')
 lnglatInput.setAttribute('value', lnglat.toString())
 }
 ContextMenu.prototype.addMarkerMenu = function() { // 右鍵菜單添加Marker標記
 this.mouseTool.close()
 this.marker = new AMap.Marker({
 map: map,
 position: this.contextMenuPositon //基點位置
 })
 this.contextMenu.close()
 // ==================infowidnow 窗口的 innerHTML
 var infoWindowContent =
 '<div id="infoWindow" className="custom-infowindow input-card">' +
 '<label style="color:grey">當前地點</label>' +
 '<div class="input-item">' +
 '<div class="input-item-prepend">' +
 '<span class="input-item-text" >經緯度</span>' +
 '</div>' +
 '<input id="lnglat" type="text" />' +
 '</div>' +
 // 為 infowindow 添加自定義事件
 '<input id="lnglat2container" type="button" class="btn" value="獲取該位置經緯度" onclick="getLngLat()"/>' +
 '</div>'
 // 創建自定義內容的 infowindow 實例
 this.infoWindow = new AMap.InfoWindow({
 position: this.contextMenuPositon,
 offset: new AMap.Pixel(0, -35),
 content: infoWindowContent
 })
 this.infoWindow.open(map)
 // 將當前經緯度展示在 infowindow 的 input 中
 } 

• 運行結果

• 設計方法

這個功能主要還是依靠右鍵菜單綁定的onclick來觸發，首先獲取當前經緯度這個功能可以先封裝為一個方法getLngLat。然后就是通過DOM操作定義變量infoWindowContent來創建要出現在選定地點的信息窗口，id值為infoWindow，信息窗口也是高德地圖JavaScript API一個比較實用的功能，可以通過設置其position屬性來設置這個信息窗口出現在界面上的位置，這里信息窗體的內容content就是上面的變量infoWindowContent。 還有添加標記也是需要用到地圖map的API點標記AMap.Marker,同理也是需要定義一個變量來引用此API，但是這個功能不同，因為是在構造函數ContextMenu內，所以這里需要把這個變量作為ContextMenu的一個新屬性來引用這個API。 最后回來右鍵菜單中的“添加標記獲取經緯度”選項，用戶點擊這個選項，會在鼠標所在經緯度添加一個點標記，并且在點標記上面出現一個信息窗口，上面有一個按鈕點擊獲取經緯度，當用戶點擊這個按鈕時，再觸發之前封裝好的getLngLat方法，然后把得到的內容顯示在經緯度的窗口內。

設置起終點規劃駕車導航

• 功能實現

規劃駕車導航一般情況下需要一個起點和一個終點，系統就可以通過算法的數據將規劃路線從起點到終點。所以用戶在起點處點擊右鍵，在彈出的菜單中選擇設為起點，此時地圖會在當前鼠標位置生成一個點標記，名稱為“起”，然后用戶可以選擇一個途徑點，同樣在途徑點處點擊鼠標右鍵在彈出的菜單中選擇設為途徑點，最后用戶在想要導航到的終點處點擊鼠標右鍵，在彈出的菜單中選擇設為終點。在用戶點擊后，地圖會自動出現一個導航信息列表，其內容包括選擇走哪一條路走多米后左轉或者右轉等導航信息。而在地圖上會出現由起點到途徑點再到終點的路線。這就是規劃駕車導航功能。

• 關鍵代碼

// 定義變量引用導航API
 var driving = new AMap.Driving({
 map: map,
 panel: "panel2"
 })
 // 為設為起點封裝方法
 ContextMenu.prototype.addOrigin = function() { //右鍵菜單添加Marker標記
 this.mouseTool.close()
 // 創建一個 Icon
 var startIcon = new AMap.Icon({
 // 圖標尺寸
 size: new AMap.Size(25, 34),
 // 圖標的取圖地址
 image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
 // 圖標所用圖片大小
 imageSize: new AMap.Size(135, 40),
 // 圖標取圖偏移量
 imageOffset: new AMap.Pixel(-9, -3)
 })
 this.origin = new AMap.Marker({
 map: map,
 position: this.contextMenuPositon, //基點位置
 icon: startIcon,
 offset: new AMap.Pixel(-9, -3)
 })
 this.contextMenu.close()
 this.origin1 = this.contextMenuPositon
 }
// 為設為途徑點封裝方法
 ContextMenu.prototype.addWaypoints = function() { //右鍵菜單添加Marker標記
 this.mouseTool.close()
 var viaIcon = new AMap.Icon({
 size: new AMap.Size(25, 34),
 // 圖標的取圖地址
 image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
 })
 this.waypoints = new AMap.Marker({
 map: map,
 position: this.contextMenuPositon, //基點位置
 icon: viaIcon,
 offset: new AMap.Pixel(-9, -3)
 })
 this.contextMenu.close()
 this.waypoints1 = this.contextMenuPositon
 }
 // 為設為終點封裝方法
 ContextMenu.prototype.addDestination = function() { //右鍵菜單添加Marker標記
 this.mouseTool.close()
 var endIcon = new AMap.Icon({
 size: new AMap.Size(25, 34),
 image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
 imageSize: new AMap.Size(135, 40),
 imageOffset: new AMap.Pixel(-95, -3)
 })
 this.destination = new AMap.Marker({
 map: map,
 position: this.contextMenuPositon, //基點位置
 icon: endIcon,
 offset: new AMap.Pixel(-9, -3)
 })
 this.contextMenu.close()
 this.destination1 = this.contextMenuPositon
 // 根據起終點經緯度規劃駕車導航路線
 driving.search(this.origin1, this.destination1, {
 waypoints: [this.waypoints1]
 }, function(status, result) {
 // result 即是對應的駕車導航信息
 if (status === 'complete') {
 log.success('繪制駕車路線完成')
 // 因為駕車導航會自動生成相應的點標記，所以之前通過右鍵設置的點標記要隱藏
 menu.origin.hide()
 menu.waypoints.hide()
 menu.destination.hide()
 } else {
 log.error('獲取駕車數據失敗：' + result)
 }
 })
 } 
復制代碼

• 運行結果

• 設計方法

這個功能是本系統較為復雜的功能，因為是需要用到右鍵菜單來設置起點、途徑點和終點的，先是在右鍵菜單中加入設置起點、設置途徑點、設置終點三個選項，分別給三個選項都設置onclick事件為addOrigin、addWaypoints、addDestination。 用戶在某一點右鍵彈出菜單，然后點擊設置起點，這個時候系統首先會通過close方法關閉菜單，然后再用戶鼠標的當前位置放置一個點標記，同時，為了提高用戶體驗，這里用到了地圖對象map的Icon屬性API，也就是字體圖標，為了讓用戶知道哪個是起點，哪個是途徑點，哪個是終點，定義變量startIcon、viaIcon、endIcon分別為其三個關鍵點的圖標，三個圖標是有樣式屬性的起、經、終三個中文名稱的字體圖標。

三個設為關鍵的方法都是通過給構造函數ContextMenu新增方法來添加，這樣做有利于起點、途徑點和終點的經緯度保存到變量中，再把變量作為構造函數的新屬性的值。用戶添加好起點、途徑點和終點時，三個關鍵點的經緯度都保存好了。

接下來就時通過定義一個變量driving來引用高德地圖的導航功能API也就是AMap.Driving，傳入地圖對象map和導航信息出現的一個HTML標簽已經提前準備的窗口panel2。 本系統選擇在當用戶選擇設為終點的選項后，立即通過變量driving調用其search方法，把之前保存在構造函數的起點、途徑點和終點的變量傳進入，然后在回調函數中增加導航完成提醒和獲取駕車數據失敗提醒。