【问题标题】:google map multiple marker with json谷歌地图多个标记与json
【发布时间】:2017-09-26 06:16:23
【问题描述】:

如何使用 json 数据在谷歌地图中制作多个标记。 我试过用单个标记它正在工作 但没有多个标记。

这是单个标记的代码(它正在工作)

var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);

 var myMapOptions = {
   zoom: 12
   ,center: myLatlng
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };

 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "images/tag.png"; //IMAGE TAG
 var marker = new google.maps.Marker({
 map: theMap,
 draggable: false,
 position: new google.maps.LatLng(lat,lang),
 visible: true,
 icon: image,
 title:restaurantName // Title
});

 var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };

这是在标记被点击时进行描述

var contentString = '<div class="map_anotaion_title">Description</div>'; //Address on pin click

var infowindow = new google.maps.InfoWindow({
  content: contentString
 });
 infowindow.open(theMap,marker); 
 google.maps.event.addListener(marker, "click", function (e) {
    infowindow.open(theMap,marker);     
 });

这是我尝试从 JSON 加载多个标记的代码(它不工作)

var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);

 var myMapOptions = {
   zoom: 12
   ,center: myLatlng
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };

 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "images/tag.png";

$.getJSON('http://myweb.com/services/get_loc_komp.php', function(json1) {
          $.each(json1, function(key, data) {
            var marker = new google.maps.Marker({
 map: theMap,
 draggable: false,
 position: new google.maps.LatLng(data.latd,data.lotd),
 visible: true,
 icon: image,
 title:data.street // Title
});

          });
        });
var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };

var contentString = '<div class="map_anotaion_title">Description</div>'; //Address on pin click

var infowindow = new google.maps.InfoWindow({
  content: contentString
 });
 infowindow.open(theMap,marker); 
 google.maps.event.addListener(marker, "click", function (e) {
    infowindow.open(theMap,marker);     
 });

请帮帮我

非常感谢

【问题讨论】:

  • 你确定这与android标签有关吗?
  • 是的。我把这段代码放在android aps中
  • 您能否向我们展示一个从 API 端点返回的 JSON 示例?例如。您在getJSON() 回调中从json1 获得的样本数据是什么?
  • 谢谢@Terry,你的简单问题,叫醒我..我在捕获 json 变量时出错了..非常感谢,它现在可以工作了

标签: javascript jquery google-maps


【解决方案1】:

它现在工作, 谢谢@terry

这是我的代码:

$.getJSON('http://myweb.com/services/get_loc_komp.php', function(data) {

all_address = data.items;

         $.each(all_address, function(index, adress) {
         var marker = new google.maps.Marker({
         map: theMap,
         draggable: false,
         position: new google.maps.LatLng(adress.latd,adress.lotd),
         visible: true,
         icon: image,
         title:adress.street // Title
});

                var contentString="";
                var infowindow="";
                     var contentString = '<div class="map_anotaion_title">'+adress.street+'</div>'; //Address on pin click


                var infowindow = new google.maps.InfoWindow({
                  content: contentString
                 });
                 infowindow.open(theMap,marker); 
                 google.maps.event.addListener(marker, "click", function (e) {
                    infowindow.open(theMap,marker);     
                 });    

          });
        });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-03-06
    • 2011-12-25
    • 1970-01-01
    • 2013-02-15
    • 1970-01-01
    • 2010-10-11
    • 1970-01-01
    • 2013-10-16
    相关资源
    最近更新 更多