在H5页面中，通过地址打开高德地图以实现导航

由于在项目中使用了高德地图，因此这里要对高德地图APP进行调试以实现此功能.

首先，您必须进入AutoNavi开放平台以申请KEY. 取得KEY后，可以通过调用js代码来实现此功能.

在上一个H5页面中，无论是用于导航还是定位，我通常使用标记来选择点. JSAPI提供的一系列方法可以轻松实现此功能.

在实现此功能的过程中网页调用高德地图导航，我使用PHP语言进行协调操作. 版本是TP5. 首先，我通过单击上一页中的标记图标跳转到控制器，并在控制器中接收地址，然后通过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 οnlοad="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}"]
            })

然后执行它，效果如图所示:

单击标记后，如图所示:

就这样网页调用高德地图导航，这是一个非常简单的功能.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-285199-1.html