如何使用 javascript 结合地理位置和多个标记？

Posted 2023-02-23

【中文标题】如何使用 javascript 结合地理位置和多个标记？

【英文标题】：How to combine geolocation and multiple markers using javascript?

【发布时间】：2012-06-07 13:10:36

【问题描述】：

我正在尝试创建一个能够跟踪我的位置并同时能够显示多个标记的地图。我可以结合下面的 2 个 javascript 吗？如果不知道我应该怎么做？

用于多个标记的 JavaScript

<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

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

【参考方案1】：

是的，可以将两者结合起来。当您初始化地图并绘制后港...位置后，您可以添加地理定位代码。我写了一个演示，它将为地理位置显示一个较小的绿色图标。如果浏览器不支持地理编码，则不会出现任何错误，也不会显示任何错误。

演示http://jsfiddle.net/yV6xv/7/

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

// 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'
        );
    );

【讨论】：

非常感谢您的帮助！ :)

可能有点晚了，但是要在本地运行它，您可以在 api 调用中插入您的 api 密钥：maps.googleapis.com/maps/api/…

【参考方案2】：

以下是一个工作示例，它正在我的项目中使用

function AddInfoWidnow(marker,message)

     var infowindow = new google.maps.InfoWindow( content: message );

     google.maps.event.addListener(marker, 'click', function() 

     infowindow.open(marker.get('map'), marker);

    ); 




function ShowOnMap(ContainerId, mapItems) 

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = 
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
;

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 


    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker(
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
);

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

使用下面的 Json 字符串来调用它。

  var mapItems='[
  
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  ,
  
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  
]';
    ShowOnMap(containerId2, mapItems);