Jquery 谷歌地图：自定义图标&；每个标记的标签

我发现了一个使用JQuery和xml显示带有多个标记的Google地图的代码

现场观看

我有这样的marker.js

$(document).ready(function() {
  $("#map").css({
        height: 500,
        width: 800
    });
    var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
  MYMAP.init('#map', myLatLng, 11);

  $("#map");
        MYMAP.placeMarkers('markers.xml');
  });

var MYMAP = {
  map: null,
    bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP    
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
    this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
    $.get(filename, function(xml){
        $(xml).find("marker").each(function(){
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();                                 

                        var icon = $(this).find('icon').text();

            // create a new LatLng point for the marker



            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

            // extend the bounds to include the new point
            MYMAP.bounds.extend(point);

            var marker = new google.maps.Marker({                                
                position: point,
                map: MYMAP.map
            });



            var infoWindow = new google.maps.InfoWindow();
            var html='<strong>'+name+'</strong.><br />'+address;
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });
            MYMAP.map.fitBounds(MYMAP.bounds);
        });
    });
}

$（文档）.ready（函数（）{
$（“#地图”）.css({
身高：500，
宽度：800
});
var mylatng=new google.maps.LatLng（17.74033553,83.25067267）；
init（“#map”，myLatLng，11）；
$（“地图”）；
placeMarkers（'markers.xml'）；
});
var MYMAP={
map:null，
界限：空
}
MYMAP.init=函数（选择器、latLng、缩放）{
变量myOptions={
缩放：缩放，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map=new google.maps.map（$（选择器）[0]，myOptions）；
this.bounds=new google.maps.LatLngBounds（）；
}
MYMAP.placeMarkers=函数（文件名）{
$.get（文件名、函数（xml）{
$（xml）.find（“marker”）.each（函数（）{
var name=$（this.find（'name'）.text（）；
var address=$（this.find（'address'）.text（）；
var icon=$（this.find（'icon'）.text（）；
//为标记创建新的板条点
var lat=$（this.find（'lat'）.text（）；
var lng=$（this.find（'lng'）.text（）；
var point=new google.maps.LatLng（parseFloat（lat），parseFloat（lng））；
//扩展边界以包括新点
MYMAP.bounds.extend（点）；
var marker=new google.maps.marker（{
位置:点,，
地图：MYMAP.map
});
var infoWindow=new google.maps.infoWindow（）；
var html=''+name+'
'+地址；
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
打开（MYMAP.map，marker）；
});
MYMAP.map.fitBounds（MYMAP.bounds）；
});
});
}

&我正在使用的xml代码

<marker>
<name>.hu</name>
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
<lat>47.29</lat>
<lng>19.05</lng>
</marker>

胡先生
Visakhapatnam Thatichetlapalem Viswa Teja学校附近
47.29
19.05

我想要的是每个标记的自定义标记图标和标签

是否可以在上述代码范围内工作

---

或者我如何才能做到这一点？

您可以通过以下方法实现这一点：

    new google.maps.Marker({ 
        position: new google.maps.LatLng(latitude, longitude), 
        map: MYMAP.map, 
        icon: new google.maps.MarkerImage("<REPLACE_WITH_MARKER_IMAGE_URL>")}); 

newgoogle.maps.Marker（{
位置：新google.maps.LatLng（纬度、经度），
map:MYMAP.map，
图标：新的google.maps.MarkerImage（“”}）；

---

还有相关的文档。

经过大量的谷歌搜索和实验，我终于解决了这个问题。一种更简单的方法 定制你的gmap

希望这能对像我这样的新手有所帮助

演示

---

谢谢

是的，但这种方法只能用于普通标记。方向标记（例如）如何？