【问题标题】:Creating several google maps marker based on address根据地址创建几个谷歌地图标记
【发布时间】:2016-04-24 14:29:15
【问题描述】:

我正在尝试根据几个地址放置谷歌地图标记,我已经设法根据坐标显示它们,但我没有坐标,我只有地址。这是我现在拥有的代码

<div id="map_canvas"></div>
var map;
        function initialize() {
          var styles = [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#fcfcfc"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#fcfcfc"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]}];

          var styledMap = new google.maps.StyledMapType(styles,
                                                        {name: "Styled Map"});


          // the position of the marker
          var zurichCenter = new google.maps.LatLng(47.3768866,8.541694);
          var latlng = new google.maps.LatLng(47.4469659,8.5833443); 
          var latlng1 = new google.maps.LatLng(46.818188,8.227512); 




          var myOptions = {
            zoom: 11,
            center: zurichCenter,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
          };
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

          var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: 'img/pin-default.png' // location of the pin image, depending of the skin used
          });

          var marker1 = new google.maps.Marker({
            map: map,
            position: latlng1,
            icon: 'img/pin-default.png' // location of the pin image, depending of the skin used
          });       


          map.mapTypes.set('map_style', styledMap);
          map.setMapTypeId('map_style');

        }
        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.addDomListener(window, "resize", function() {
          var center = map.getCenter();
          google.maps.event.trigger(map, "resize");
          map.setCenter(center); 
        });

【问题讨论】:

  • 我还没有尝试过地理编码 api,但很好奇你有没有尝试过,因为在你的问题中你说的是坐标,在地理编码中我们可以传递地址文本,这个 api 会将其更改为 lat 和 logi 和在地图中搜索。
  • 不,我没试过,我知道那个 api,但是如何传递这种值?
  • 我不确定我是否得到您的陈述“这种如果值”。但是在查看您的代码时,看起来您有一些坐标并且您将标记放在那里。如果您可以按照这个链接developers.google.com/maps/documentation/geocoding/intro 并输入您的街道地址,您将获得您的地址,一旦您获得地址,您就可以将标记放在那里,就像您现在通过放置纬度和经度所做的那样。如果没有帮助,我很抱歉。
  • 我需要一个例子,如果我有地址而不是坐标

标签: api google-maps google-maps-api-3 maps


【解决方案1】:

使用Geocoding API,如 cmets 中所述,您可以将地址转换为坐标。

您可以找到有关如何使用 API here 的示例。

我在您的代码中找不到地址。

编辑:

这是一个简单的例子(从上面的链接复制):

var geocoder = new google.maps.Geocoder();
var address = "Bergmannstraße 2, Berlin, Germany";

geocoder.geocode({'address': address}, function (results, status) {
  if (status === google.maps.GeocoderStatus.OK) {
    resultsMap.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: resultsMap,
      position: results[0].geometry.location
    });
  }
  else {
    alert('Geocode was not successful for the following reason: ' +    status);
 }
});

工作小提琴:

http://jsfiddle.net/4mtyu/1167/

http://jsfiddle.net/4mtyu/1164/

【讨论】:

  • 在示例中,有自定义地址的代码......请参阅我在帖子中的编辑。将地址更改为您想要的任何地址
  • 是的,但我有几个地址?
  • 你只需要多次运行地理编码器并每次添加新标记。
  • jsfiddle.net/4mtyu/1164 如果你缩小,你会看到,有 2 个标记。
猜你喜欢
  • 2013-05-14
  • 1970-01-01
  • 1970-01-01
  • 2020-05-07
  • 2018-09-26
  • 1970-01-01
  • 2015-09-20
  • 1970-01-01
  • 2015-10-22
相关资源
最近更新 更多