Question

我正在创建一个使用JavaScript显示Google地图的网页。如何将图像作为图标放在该地图上。这就是我所拥有的：

<script language="javascript">
    var lat=1067;
    var lon=-110;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(lat, lon), 13);
      }
    }
    function map(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        load();
    }
    function get_location() {
        navigator.geolocation.getCurrentPosition(map);
    }
    </script>

</head>
<body onload="load()" onunload="GUnload()">
<input type ="Button" size = "50" onclick = "get_location();">Search</input>
<div id="map" style="width: 1200px; height: 600px"></div>

Answer 1

Google地图中的图标是文档中“重叠”部分的一部分。 Here是指向文档相关部分的链接。

简而言之：

  var image = 'beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); //or wherever you want the marker placed
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

Answer 2

我使用Google Maps API（v3）中的setIcon函数，如：

// This is our marker image, sets the size and position (from the center of the map)
this.image = new google.maps.MarkerImage("/gfx/map/icon_hotel.png",
    // This marker is 22 pixels wide by 28 pixels tall.
    new google.maps.Size(22, 28),
    // The origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,28
    new google.maps.Point(11, 28)
);

// This is our marker shadow. Same location as marker, but different dimensions
this.shadow = new google.maps.MarkerImage("/gfx/map/icon_hotel_shadow.png",
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    new google.maps.Size(33, 28),
    new google.maps.Point(0,0),
    new google.maps.Point(11, 28)
);

谷歌有一个例子：http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html

在Google地图上放置图片

2 个答案: