谷歌地圖多個標記與JSON

-1

如何在谷歌地圖，使用JSON數據製作多個標記。我嘗試過使用單個標記，它正在工作但沒有多標記。谷歌地圖多個標記與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);  
});

請幫我任何人

非常感謝你

來源

2017-09-26 Def

https://stackoverflow.com/questions/30569854/adding- google-maps-api-v2-android –

你確定這涉及到android標籤嗎？ –

是的。我把這段代碼放在android aps – Def

其現在的工作，謝謝@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);  
       });  

      }); 
     });

來源

2017-09-26 06:40:37 Def

谷歌地圖多個標記與JSON

回答

相關問題