基於高德地圖JavaScript API 設計開發成的一個單頁面應用
獲取高德地圖key
-
進入高德地圖開放平臺，註冊高德地圖帳號、登錄、認證爲開發者，而後進入我的控制檯、建立新應用，在建立的應用上點擊「添加key」按鈕。 git
-
這裏咱們須要用到的高德地圖的JavaScript API ，因此點擊添加按鈕後咱們選擇Web 服務的JS API如圖 github
底圖切換與圖層顯示
- 功能實現
- 利用高德地圖提供的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()
}
複製代碼
-
運行結果 web
-
設計方法算法
- 判斷當用戶點擊按鈕，按鈕名稱爲衛星時，底圖切換爲衛星圖層也就是衛星圖層變量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); //關鍵字查詢查詢
}
複製代碼
-
運行結果數據庫
-
輸入提示 api
-
POI搜索bash
- 設計方法
- 輸入提示與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方法，把以前保存在構造函數的起點、途徑點和終點的變量傳進入，而後在回調函數中增長導航完成提醒和獲取駕車數據失敗提醒。
源碼連接ide
相關文章
- 1. 高德地圖JavaScript API開發研究
- 2. 高德地圖API開發應用-----地圖顯示+定位+marker
- 3. 高德地圖(AMap)JavaScript API的使用
- 4. 高德地圖 Javascript API 入門（一）
- 5. 高德地圖javascript
- 6. 高德地圖API學習使用-JavaScript
- 7. 第三方高德地圖Javascript API
- 8. 高德地圖 Javascript API 入門（二）
- 9. 高德地圖api
- 10. 高德地圖 Javascript API 入門（五）
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • PHP imagecreate - 新建一個基於調色板的圖像 - PHP參考手冊
- • PHP開發工具
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
