谷歌通过地理定位按钮绘制多个标记

Question

我想在谷歌地图中同时使用多个标记（位置）和地理位置。

一切都会好起来的，如果我可以在这一行使用resultx变量

中心：新谷歌地图LatLng（'42'，'26'，13），

而不是'42'，'26'

我试过resultx，'resultx'，'+resultx+'。。例如，但它不起作用。

那么你的建议是什么呢？

-----HTML----

       <div id="map-canvas"></div> 
       <button onclick="getLocation()">Get your location</button> 

-----JAVASCRIPT----

 <script>
  var x = document.getElementById("map-canvas");
  function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    var latx=''+position.coords.latitude+'';    
    var lonx=''+position.coords.longitude+'';   
    var resultx=latx+','+lonx;
    var locations = [ 
    ['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1] , ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      zoom: 5,  
      scrollwheel: false,
      center: new google.maps.LatLng('42','26',13),
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    for (i = 0; i < locations.length; i++) {   
      marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        disableAutoPan: true,
        map: map 
      }); 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
          infowindow.setContent(locations[i][0]); 
          infowindow.open(map, marker); 
        } 
      })(marker, i)); 
    }

}
</script>

Answer 1

要使用地理定位函数的结果，请从所需的纬度和经度创建一个google.maps.LatLng（或google.maps.RatLngLiteral），然后使用它来居中地图。

function showPosition(position) {
  var latx=position.coords.latitude;    
  var lonx=position.coords.longitude;   
  var resultx=new google.maps.LatLng(latx,lonx);
  var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 5,  
    scrollwheel: false,
    center: resultx,
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }); 

概念验证小提琴

代码片段：

var x = document.getElementById("map-canvas");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  var latx = position.coords.latitude;
  var lonx = position.coords.longitude;
  var resultx = new google.maps.LatLng(latx, lonx);
  var locations = [
    ['Helooo', 40, 30, 0],
    ['Helooo', 41.04564, 28.97862, 1],
  ];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    scrollwheel: false,
    center: resultx,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      disableAutoPan: true,
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="getLocation()">Get your location</button>
<div id="map-canvas"></div>

Answer 2

google.maps.LatLng仅使用两个参数（lat，lng）

在您的情况下，您在传递用逗号（'42'，'26'，13）分隔的值时出错，

例如

 center: new google.maps.LatLng(42.26010101, 26.1801010101)

使用句点作为小数分隔符，不要传递第三个参数。