Google 地图 V3 地址中的多个标记

发布于 2024-12-09 21:24:53 字数 1687 浏览 5 评论 0原文

我需要知道如何从地址在谷歌地图 v3 上添加多个标记。我正在开发一个网站，其中包含 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>

原文

I need to know that how to add multiple markers on google maps v3 from addresses. I am working on a website which has list of 10 businesses with their address per page and a map to locate them. I implimented a map for only one business but I need to know how to impliment for multiple addresses stored in variable named address1,...2,...3,...4. Following are my codes for one business:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

漫漫岁月 2024-12-16 21:24:53

最近做了大致相同的事情：在下面的示例中，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" });
}

Recently did roughly the same thing: in the below example, r contains a map center latitude and longitude, and a list of markers. Each marker has again a latitude and longitude, some text to show for the marker, and an index variable to use a different icon for each result.

Multiple markers are added by simply creating them, and giving the same map instance. The maps library is smart enough to show them all.

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" });
}

回复收藏 0 原文

~没有更多了~