如何更改我网站上的谷歌地图标记

How to change the google map marker in my website

本文关键字：谷歌 地图 图标 何更改 网站      更新时间：2023-09-26

如何更改谷歌地图标记并在我的网站中添加两个标记。

目前我正在使用以下代码：

function init_map(lat,lng,ZmLevel) {
   var myOptions = {
      zoom:ZmLevel,center:new google.maps.LatLng(lat,lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);        
   <?php 
      $sql = "select * from locator_areas where cid=$city";
      $res = mysql_query($sql);
      while($row=mysql_fetch_assoc($res)) {
   ?>
         marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $row['latitude']; ?>,<?php echo $row['longitude']; ?>)});
         infowindow = new google.maps.InfoWindow({
            content:'<div style="color:#000000;"><?php echo str_replace("''","`",$row['address']); ?></div>'
         });
         bindInfoWindow(marker, map, infowindow);
   <?php }?>
}
function bindInfoWindow(marker, map, infowindow) {
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
   });
}
function loadCity() {
   var cid = $('#city_name').val();
   window.location = "?cid="+cid;
}

我想更改标记，并想为公司的一些新开业网点再添加一个标记

若要指定此类图标，请将标记的 icon 属性设置为图像的 URL。谷歌地图API会自动调整图标的大小。

 var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(<?=$row['latitude']?>,<?=$row['longitude']?>), 
                icon: imageURL
 });

请阅读本文以添加多个标记

若要自定义marker的图像，可以将icon属性传递给Marker承包商。当然，如果要创建markers"组"，只需将所有组的标记设置为相同的图像即可。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });
  var pos = [
    {
      location: {lat: -25.463882, lng: 120.047922},
      image: 'http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Pink.png'
    },
    {
      location: {lat: -25.763882, lng: 130.844992},
      image: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png'
    }
  ];
  for (var i in pos) {
    var marker = new google.maps.Marker({
      position: pos[i].location,
      icon: pos[i].image,
      map: map
    });  
  }
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true" async defer></script>

相关文章：