锐客网

  1. 首页 > 睿知 > it技术 > >

如何实现在H5里调起高德地图APP

IT知识高德地图如何如何实现

曾无好事来相访，赖尔高文一起予。这篇文章主要讲述如何实现在H5里调起高德地图APP相关的知识，希望能为你提供帮助。
点标记位置展示
通常我们都使用Marker点来进行位置的标定，所以JSAPI在Marker类中提供了markOnAMAP的方法，这个方法接受一个JSON对象参数，参数对象包含position和name两个属性，调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点，基于marker点的展示，用户可以接着使用周边搜索、路线规划和导航等功能。扫描右侧二维码，点击地图中见的marker点查看移动端调起来效果。
 
核心代码：
var marker = new AMap.Marker({
              position:[116.473188,39.993253]
      });

      marker.markOnAMAP({
              position: marker.getPosition(),
              name:‘首开广场‘//name属性在移动端有效
      })
全部源代码，可复制后直接使用：
【如何实现在H5里调起高德地图APP】< !DOCTYPE html>
< html>
< head lang="en">
      < 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>
      < 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://img.readke.com/220427/15301213E-0.jpg"> < /script>
      < script type="text/javascript" src="http://img.readke.com/220427/15301261Y-1.jpg key=您申请的key值& plugin=AMap.ToolBar"> < /script>
      < script>
              function init() {
                      map = new AMap.Map("mapContainer", {
                              zoom: 18,
                              center:[116.473188,39.993253]
                      });
                      marker = new AMap.Marker({
                              map:map,
                              position:[116.473188,39.993253]
                      })
                      marker.setLabel({
                              offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                              content: "点击Marker打开高德地图"
                      });
                      marker.on(‘click‘,function(e){
                              marker.markOnAMAP({
                                      name:‘首开广场‘,
                                      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‘>
              < img src="http://img.readke.com/220427/1530121R1-2.png" style=‘width:120px; height:120px‘>
              < div class=‘button‘ style=‘text-align: center‘> 手机扫码打开demo< /div>
      < /div>
< /body>
< /html>




























































    推荐阅读


    上一篇：About App Sandbox

    下一篇：Android wifi无线调试App新玩法ADB WIFI