如何结合使用JavaScript的地理定位和多个标记？

问题描述

我试图创建一个能够跟踪我的位置并同时能够显示多个标记的地图。我能结合下面的2个JavaScript吗？如果没有关于我应该怎么做的想法？

多重记号的JavaScript

  < script type =text / javascript> 
变种位置= [
 [ '后港'，1.37265，103.893658]，
 [ '榜鹅'，1.400617，103.907833]，
 [ '麦里芝蓄水池'，1.346002，103.825436] ，
 ['Bishan'，1.352051,103.849125]，
 ['Sentosa'，1.251226,103.830757] 
]; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：15，
 center：new google.maps.LatLng（1.37265 ，103.893658），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
  

当前位置的JavaScript
$ b

  navigator.geolocation.getCurrentPosition（function（position）{
 var latitude = position.coords.latitude; 
 var longitude = position.coords.longitude; 
} 
  

是的，可以将两者结合起来，当初始化地图并绘制后港地点后，您可以添加地理位置代码。如果浏览器不支持地理编码，则不会显示任何内容，也不会显示任何错误。

DEMO

请记住，如果代码是从硬盘本地加载的，则地理位置不起作用（至少对我来说），它必须公开提供。

  // Che CK如果用户支持地理位置
如果（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（功能（位置）{
 VAR纬度= position.coords.latitude; 
 var longitude = position.coords.longitude; 
 var geolocpoint = new google.maps.LatLng（latitude，longitude）; 
 
 var mapOptions = {
 zoom：8，
 center：geolocpoint，
 mapTypeId：google.maps.MapTypeId.HYBRID 
} 
 //放置一个标记
 var geolocation = new google.maps.Marker（{
 position：geolocpoint，
 map：map，
 title：'Your geolocation'，
图标：'http://labs.google.com/ridefinder/images/mm_20_green.png'
}）; 
}）; 
} 
  

I'm trying to create a map that is able to track my location and at the same time be able to display multiple markers. Am I able to combine the 2 JavaScript below? If not any idea on how I should do it?

JavaScript for multiple markers

<script type="text/javascript">
  var locations = [
  ['Hougang', 1.37265, 103.893658],
  ['Punggol', 1.400617, 103.907833],
  ['MacRitchie Reservoir', 1.346002, 103.825436],
  ['Bishan', 1.352051, 103.849125],
  ['Sentosa', 1.251226, 103.830757]
];

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(1.37265, 103.893658),
      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]),
          map: map
      });

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
          }
      })(marker, i));
  }

JavaScript for current location

navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
    }

解决方案

Yes, it is possible to combine the two. When you initialize the map and after plotting the Hougang... locations you can add the geolocation code. I wrote a demo that will show a smaller green icon for the geolocation. If the browser doesn't support geocoding nothing will appear, no errors will show either.

DEMO http://jsfiddle.net/yV6xv/7/

Keep in mind the geolocation does not work (for me at least) if the code is loaded locally from the hard drive. It must be served publicly.

// Check if user support geo-location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 8,
            center: geolocpoint,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        var geolocation = new google.maps.Marker({
            position: geolocpoint,
            map: map,
            title: 'Your geolocation',
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
    });
}

这篇关于如何结合使用JavaScript的地理定位和多个标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！