百度Google地图定位当前用户位置

百度地图定位到当前城市:

       map = new BMap.Map("map", {});// 创建Map实例
         var myCity = new BMap.LocalCity();
         myCity.get(myFun);
         //定位到当前城市
         function myFun(result) {
             var cityName = result.name;
             map.setCenter(cityName);
         }

Google地图定位当前位置(https网址可以正常弹出定位提示框,http不行)

 //初始化地图
	map = new google.maps.Map(document.getElementById('map'), {
	       center: {lat: -34.397, lng: 150.644},
	       zoom: 8,
	       fullscreenControlOptions: {
	      //将全屏控件放到地图下方,默认在右上角
	      position: google.maps.ControlPosition.BOTTOM_RIGHT
	      },
	     });
  // Try HTML5 geolocation.
        if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function (position) {
                  var pos = {
                      lat: position.coords.latitude,
                      lng: position.coords.longitude
                  };
                  map.setCenter(pos);
              }, function () {
                  handleLocationError(true, infoWindow, map.getCenter());
              });
          } else {
              // Browser doesn't support Geolocation
              // layer.alert("Error: The Geolocation service failed.")
              handleLocationError(false, infoWindow, map.getCenter());
          }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
           infoWindow.setPosition(pos);
           infoWindow.setContent(browserHasGeolocation ?
               'Error: The Geolocation service failed.' :
               'Error: Your browser doesn\'t support geolocation.');
           infoWindow.open(map);
       }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于HTML模板添加地图标记,可以使用以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地图添加地图标记示例</title> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script> <script> var map = new BMap.Map("map"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); map.addOverlay(marker); </script> </body> </html> ``` 其中,由于使用了百度地图API,需要将“你的百度地图密钥”替换成自己的百度地图开发者密钥。 如果想要将地图定位当前位置,可以使用HTML5的Geolocation API获取当前位置,然后将地图中心点设置为当前位置,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地图定位当前位置示例</title> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script> <script> var map = new BMap.Map("map"); function success(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); map.addOverlay(marker); } function error() { console.log("无法获取当前位置"); } navigator.geolocation.getCurrentPosition(success, error); </script> </body> </html> ``` 这样,地图就会定位当前位置,并在地图上标记出当前位置的标记点。需要注意的是,定位需要用户授权,如果用户不同意授权,则无法获取当前位置。另外,代码中使用了console.log输出调试信息,需要在浏览器控制台中查看。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值