[英]How can I add two locations into same google map for website
我正在努力在同一张Google地图上包括两个位置。 在这里,我包含了一个位置,如何包含纬度和经度分别为51.626778,0.513829的另一个位置。 如果我添加了与以前的印度地址相同的地址,则通过添加“纬度”和“经度”以逗号表示,它不起作用。 下面是我的JS和HTML
我已经使用API“ http://maps.google.com/maps/api/js?sensor=false ”集成了Google地图。
HTML: <div id="Map"></div>
CSS: #map{ width:100%; height:450px;}
#map{ width:100%; height:450px;}
JS:
var locations = [
['<div class="infobox"><h3 class="title"><a href="#contact">OUR INDIA ADDRESS</a></h3></div></div></div>', 12.996868, 80.209891, 2]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
scrollwheel: false,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
draggable: false,
styles: [ { "stylers": [ { "hue": "#ff6501" }, {saturation: 20},
{gamma: 1} ] } ],
center: new google.maps.LatLng( 12.996868, 80.209891),
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 ,
icon: 'images/marker1.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
请对此进行指导,谢谢您的帮助。
编辑:是的,用标记同时显示多个位置的相同方法
您的位置变量应如下所示
var locations = [ ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],['OUR INDIA ADDRESS', 51.626778, 0.513829, 2]]
在下面的示例中,它清楚地显示了如何向地图添加多个位置。 这是您可以在其中添加多个标记图标的示例,单击后可以放置标记,并在信息窗口中显示地址。
<script>
var locations = [
['Hyderabad', 17.38504, 78.48667],
['Chennai', 13.08268, 80.27072],
['Bangalore', 12.97160, 77.59456],
['Mumbai', 19.07598, 72.87766],
['Pune', 18.52043, 73.85674]
];
var Hyderabad = new google.maps.LatLng(17.38504, 78.48667);
var Chennai = new google.maps.LatLng(13.08268, 80.27072);
var Bangalore = new google.maps.LatLng(12.97160, 77.59456);
var mumbai = new google.maps.LatLng(19.07598, 72.87766);
var map = null;
function initialize() {
var mapProp = {
center: Hyderabad,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
content: locations[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: locations[i][0]
});
marker.setMap(map);
}
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
geocodeLatLng(geocoder,map,infowindow,event.latLng)
});
}
function placeMarker(location) {
debugger;
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
//var infowindow = new google.maps.InfoWindow({
// content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
//});
//infowindow.open(map, marker);
//geocodeLatLng(geocoder,map,infowindow);
}
function geocodeLatLng(geocoder, map, infowindow, latlang) {
debugger;
//var input = latlang;
//var latlngStr = input.split(',', 2);
var latlng = { lat: parseFloat(latlang.lat()), lng: parseFloat(latlang.lng()) };
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
//map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
您的代码有效。 只需在数组中创建一个新项目:
var locations = [
['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],
['OUR INDIA ADDRESS 2', 12.976868, 80.209891, 2]
];
您以示例[51.626778,0.513829]给出的坐标为欧洲。
参见工作方式: http : //jsfiddle.net/adrianogodoy/325ukwsg/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.