Google使用地理位置按钮映射多个标记

时间:2015-11-29 11:02:34

标签: javascript google-maps google-maps-api-3 geolocation

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

如果我可以在此行使用 resultx 变量,那么一切都会好的

  

center:new google.maps.LatLng(' 42',' 26' ,13),

代替' 42'' 26'

我试过了结果x,'结果x',' +结果x +' ..但是它不起作用。

那你的建议是什么?

----- ---- HTML

 <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>

----- ---- JAVASCRIPT

create

2 个答案:

答案 0 :(得分:1)

要使用地理位置功能的结果,请从所需的纬度和经度创建google.maps.LatLng(或google.maps.LatLngLiteral),然后使用它来居中显示地图。

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 
  }); 

proof of concept fiddle

代码段

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>

答案 1 :(得分:0)

google.maps.LatLng只使用两个参数(lat,lng)

在你的情况下,你做错误传递以逗号分隔的值(&#39; 42&#39;,&#39; 26&#39;,13),

尝试这种方式,例如

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

使用dot作为十进制分类器并且不通过第三个参数。