項目中用到的一個功能是要通過點擊地址來實現打開地圖app實現地址導航。
如下圖：
實現思路就是在H5頁面內通過點擊marker圖標然后進行當前位置與頁面上地址的路程規划與導航。
由於項目中用到的是高德地圖，所以這里用到的是調起高德地圖APP來實現該功能。
首先肯定要去高德開放平台去申請KEY，拿到這個KEY后通過調用js代碼就可以實現該功能。
之前在H5頁面中無論是做導航還是定位一般我都是采用marker進行選點操作的，JSAPI中提供的一系列的方法可以很輕松的實現該功能，
該功能實現過程，我用的php語言進行配合操作，版本為TP5，首先我通過點擊上個頁面中的marker圖標跳轉到控制器，在控制器接收該地址，通過PHP方法獲取該地址的經緯度，這個實現過程我就不貼圖展示了，獲取到經緯度后我通過賦值渲染到html頁面后代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<include file="Public/header" />
<style>
body,#mapContainer{
margin:0;
height:100%;
width:100%;
font-size:12px;
}
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=申請的KEY值&plugin=AMap.ToolBar"></script>
<script>
function init() {
map = new AMap.Map("mapContainer", {
zoom: 18,
center:["{$lng}","{$lat}"]
});
marker = new AMap.Marker({
map:map,
position:["{$lng}","{$lat}"]
})
marker.setLabel({
offset: new AMap.Pixel(20, 20),//修改label相對於maker的位置
content: "點擊Marker打開高德地圖"
});
marker.on('click',function(e){
marker.markOnAMAP({
position:marker.getPosition()
})
})
map.addControl(new AMap.ToolBar());
if(AMap.UA.mobile){
document.getElementById('button_group').style.display='none';
}
}
</script>
</head>
<body onload="init()">
<div id="mapContainer" ></div>
<div class="button-group" id='button_group' style='top:15px;bottom:inherit'>
</div>
</body>
</html>
其中 有兩個處代碼需要改變成變量
一個是：
map = new AMap.Map("mapContainer", {
zoom: 18,
center:["{$lng}","{$lat}"]
});
另外一處：
marker = new AMap.Marker({
map:map,
position:["{$lng}","{$lat}"]
})
然后，執行一下，效果如圖：
點擊marker之后如圖：
這就可以了，挺簡單的一個小功能。
本文屬原創內容，為了尊重他人勞動，轉載請注明本文地址：