Fatal编程技术网
  • google-maps/
  • Google maps 谷歌地图V3从地址多个标记

Google maps 谷歌地图V3从地址多个标记

google-maps

Google maps 谷歌地图V3从地址多个标记,google-maps,google-maps-markers,street-address,Google Maps,Google Maps Markers,Street Address,我需要知道如何在GoogleMapsV3上从地址添加多个标记。我在一个网站上工作，网站上有10家企业的名单，每页都有他们的地址和一张地图来定位他们。我只为一个业务实现了一个映射，但我需要知道如何为存储在名为address1，…2，…3，…4的变量中的多个地址实现映射。以下是我的一项业务代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

我需要知道如何在GoogleMapsV3上从地址添加多个标记。我在一个网站上工作，网站上有10家企业的名单，每页都有他们的地址和一张地图来定位他们。我只为一个业务实现了一个映射，但我需要知道如何为存储在名为address1，…2，…3，…4的变量中的多个地址实现映射。以下是我的一项业务代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">  
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
var address = '52+E+20th+St, New+York, NY';
var address1 = '42+E+29th+St, New+York, NY';
var address3 = '56+W+25th+St, New+York, NY';
var address4 = '26+W+21th+St, New+York, NY';

geocoder.geocode({'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
}); 
  }  
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:250px"></div>
</body>
</html>


多重映射
var映射；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var地址='52+E+20+St，纽约+纽约'；
var address1='42+E+29+St，纽约+纽约'；
var地址3='56+W+25+St，纽约+纽约'；
var address4='26+W+21+St，纽约+纽约'；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
}
最近做了大致相同的事情：在下面的示例中，
r
包含地图中心纬度和经度，以及标记列表。每个标记都有一个纬度和经度，一些文本要为标记显示，还有一个索引变量要为每个结果使用不同的图标

只需创建多个标记，并提供相同的
map
实例，即可添加多个标记。地图库足够智能，可以显示所有地图

var latlng = new google.maps.LatLng(r.dest.lat, r.dest.lng);
var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (marker in r.markers)
{
    var m = r.markers[marker];
    var d = new google.maps.Marker({ position: new google.maps.LatLng(m.lat, m.lng),
                                     map: map,
                                     title: m.text,
                                     icon:"http://www.google.com/mapfiles/marker" + m.l + ".png" });
}