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


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

    可以分为一下三步:

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

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

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

    代码实现如下:

    <!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" onclick="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>
    

      

  • 相关阅读:
    CentOS挂载ntfs
    搬水果
    CentOS安装完显卡启动进不去系统
    二叉树遍历
    拓展的异常类
    Visual Studio 2008 IDE 出现 “帮助更新正在进行”错误的解决办法
    JSON工具SuperObject编译时"整数溢出"异常的解决办法
    引用命名区域
    ruby操作excel的几段代码
    Delphi2009&2007中,测试工程的初级使用(DUnit)
  • 原文地址:https://www.cnblogs.com/hfxm/p/6494561.html
Copyright © 2020-2023  润新知