zoukankan      html  css  js  c++  java
  • 百度地图API示例之添加定位相关控件

     

    代码

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{100%;height:100%;}
        p{margin-left:5px; font-size:14px;}
      </style>
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
      <title>添加定位相关控件</title>
    </head>
    <body>
      <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
      // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true // 会多出一个点
      });
      map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为:" + address);
      });
      geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        alert(e.message);
      });
      map.addControl(geolocationControl);
    </script>
    复制代码

    效果

  • 相关阅读:
    actionscript3.0 的一些小技巧
    Flash 安全沙箱的意义
    明明连上了网,但是打不开网页
    关于电脑上可用内存太小的问题
    AS3 Starling 学习杂谈 (一) Quad类
    更新flash builder4,6 的AIR版本
    软件工程实践2017第二次作业
    软件工程实践2017第一次作业
    微信小程序开发指南合集 各类组件用法技巧
    微信小程序视频教程合集 附带源码、PPT下载
  • 原文地址:https://www.cnblogs.com/ldms/p/5842141.html
Copyright © 2011-2022 走看看