我无法根据纬度和经度在Google地图上添加多个标记。我从localhost向我的JSON发出AJAX调用。 这是JavaScript代码:
var map;
var Latitude, Longitude;
var markersArray = [];
function initialize() {
var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);
var mapOptions = {
zoom: 6,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function (position) {
// initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// map.setCenter(initialLocation);
// });
//}
initialLocation = new google.maps.LatLng(20.2700, 85.8400);
map.setCenter(initialLocation);
var marker = new google.maps.Marker({
position: myLatlng1,
});
marker.setMap(map);
var marker = new google.maps.Marker({ position: initialLocation, map: map, title: "You are here!" });
getLocations();
//PlotMarker(Latitude,Longitude);
};
function getLocations() {
$.ajax({
type: "GET",
url: "http://localhost:44149/api/values",
dataType: "json",
success: function (json) {
$.each(json, function (key, value) {
//console.log("Key : " +key + " Value : "+value.Longitude );
PlotMarker(value.Latitude, value.Longitude);
});
},
error: function (err) {
console.log(err);
}
});
}
function PlotMarker(Lat, Long) {
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Long),
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markersArray.push(marker1);
}
//google.maps.event.addDomListener(window, "load", initialize);
注意:我的初始位置的标记工作正常,但未添加多个标记。 你能发现错误吗?我们将非常感谢您的帮助。 谢谢。
答案 0 :(得分:0)
当您创建了一个全局map
变量时,实际初始化的变量是初始化函数的本地变量,删除" var"在它面前。这是不正确的:
var map; // global map variable
var Latitude, Longitude;
var markersArray = [];
function initialize() {
var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);
var mapOptions = {
zoom: 6,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// local to the initialize function:
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
将其更改为:
var map; // global map variable
var Latitude, Longitude;
var markersArray = [];
function initialize() {
var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);
var mapOptions = {
zoom: 6,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the global version of the variable:
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
代码段
var map;
var Latitude, Longitude;
var markersArray = [];
function initialize() {
var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);
var mapOptions = {
zoom: 6,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
initialLocation = new google.maps.LatLng(20.2700, 85.8400);
map.setCenter(initialLocation);
var marker = new google.maps.Marker({
position: myLatlng1,
});
marker.setMap(map);
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here!"
});
getLocations();
//PlotMarker(Latitude,Longitude);
};
function getLocations() {
/* $.ajax({
type: "GET",
url: "http://localhost:44149/api/values",
dataType: "json",
success: function (json) {
$.each(json, function (key, value) {
//console.log("Key : " +key + " Value : "+value.Longitude );
PlotMarker(value.Latitude, value.Longitude);
});
},
error: function (err) {
console.log(err);
}
}); */
PlotMarker( /* Kolkata, West Bengal, India (*/ 22.572646, 88.36389499999996);
PlotMarker( /* Ranchi, Jharkhand, India (*/ 23.3440997, 85.30956200000003);
}
function PlotMarker(Lat, Long) {
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Long),
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markersArray.push(marker1);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
&#13;