如何在jquery mobile中同时放置两个经纬度位置

Posted 2023-02-23

【中文标题】如何在jquery mobile中同时放置两个经纬度位置

【英文标题】：how to place two located latitude and longitude place same time in jquery mobile

【发布时间】：2015-02-11 06:53:49

【问题描述】：

我们需要一次显示两个位置的经纬度。我们有两组这样的经纬度

["Longitude":"17.4954","Lattitude":"78.2960","UserID":3,"Longitude":"17.3616","Lattitude":"78.4747","UserID":3]

我的问题是它的 pin 只显示最后的经度和纬度我们编码这个

$(all).each(function () 
    alert(this.Longitude);
    alert(this.Lattitude);


    debugger;
     directionsDisplay = new google.maps.DirectionsRenderer();
    var mapCenter = new google.maps.LatLng(this.Longitude, this.Lattitude);

    debugger;
    var myOptions = 
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: mapCenter


    

    debugger;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  //  directionsDisplay.setPanel(document.getElementById("directions"));  

// marker will be displayed on the lat long position
var marker = new google.maps.Marker(

position:mapCenter,
map: map
);
);

所有变量都可以动态获取数据，这意味着有时它也会到达 10 个位置 任何人都告诉我我的代码有什么问题。请指导我。

【问题讨论】：

您要放置 2 个标记？

@Ethaan 是的，我有 10 分

【参考方案1】：

假设你有这个数组

var markersArray = ["Longitude":"17.4954","Lattitude":"78.2960","UserID":3,"Longitude":"17.3616","Lattitude":"78.4747","UserID":3]

所以如果你运行console.log(markersArray.length)，你会得到这个输出

2

现在我们还好吗？

现在我们需要一个functions 和一个for loop 来创建基于markersArray 的标记

这样的函数。

function createMarkers()
  for(var i = 0 ; i <markersArray.length ; i++) 
      lat = markersArray[i].Lattitude;
      long = markersArray[i].longitude;
      var marker = new google.maps.Marker(
        position: new google.maps.LatLng(lat, long),
        map: map,
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      );
    

说明我需要将您的代码放在我的代码中的什么位置

您需要将此代码放在initializeMap() 函数中（或用于初始化地图的任何函数名称）。

createMarkers()

【讨论】：

感谢您的回复。我是新人，您能解释一下我需要将您的代码放在我的代码中的哪个位置

能否请您在 jsFiddle 中上传您的代码，但是看看简历，您有一个嵌套对象 "Longitude":"17.4954","Lattitude":"78.2960","UserID":3,"Longitude":"17.3616","Lattitude":"78.4747","UserID":3 所以只需创建一个函数来基于该嵌套对象创建标记，但就像我说的那样将代码上传到 [jsFiddle](jsfiddle.net)

【参考方案2】：

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map_canvas" style="width:100%;height:100%; position:absolute;"></div> 

JAVASCRIPT

var all=["Longitude":"17.3616","Lattitude":"78.4747","UserID":3,"Longitude":"17.4954","Lattitude":"78.2960","UserID":3];
var map;
 var infowindow = new google.maps.InfoWindow();
$(all).each(function (key, value) 

    if(key == 0)
        map = new google.maps.Map(document.getElementById('map_canvas'), 
          zoom: 6,
          center: new google.maps.LatLng(this.Lattitude, this.Longitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        );
           

   var marker = new google.maps.Marker(
        position: new google.maps.LatLng(this.Lattitude, this.Longitude),
        map: map
   );

   var content = this.Lattitude+", "+this.Longitude;
   google.maps.event.addListener(marker, 'click', (function(marker, key) 
        return function() 
          infowindow.setContent(content);
          infowindow.open(map, marker);
        
   )(marker, key));
);