根据地址，调用谷歌地图的导航

最新推荐文章于 2022-03-10 11:28:37 发布

weixin_34418883

最新推荐文章于 2022-03-10 11:28:37 发布

阅读量409

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/hfxm/p/6494561.html

版权

这几天需要做一个地图的导航，根据商家的地址解析成经纬度，然后利用导航带用户去。

可以分为一下三步：

第一步：用户点击页面上的带我去按钮：

第二步：地图上显示出商家的位置

第三步：点击到这里去，根据地图默认获取的用户位置为起点，商家的位置为终点，弹出路线图

代码实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地理编码</title> 
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=8428ed5fa6efce876e45150cec0bd13e&plugin=AMap.Geocoder"></script>
     
</head>
<body>
<button id="btngo" οnclick="geocoder()">带我去</button> 
<script type="text/javascript"> 
    var map = new AMap.Map("container", {
        resizeEnable: false
    });
    function geocoder() {
        var geocoder = new AMap.Geocoder({
            city: "", //城市，默认：“全国”
            radius: 1000 //范围，默认：500
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation("武汉市洪山区光谷广场", function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result); 
            }
        });
    } 
    //地理编码返回结果展示
    function geocoder_CallBack(data) { 
        //地理编码结果数组
        var geocode = data.geocodes;
        for (var i = 0; i < geocode.length; i++) {
        	
            window.location.href ="http://m.amap.com/navi/?dest="+geocode[i].location.getLng()+","+geocode[i].location.getLat()+"&destName=到这里去&key=8428ed5fa6efce876e45150cec0bd13e";
        } 
    }  
</script>
</body>
</html>

转载于:https://www.cnblogs.com/hfxm/p/6494561.html