Question

我想在我的网站中添加一个谷歌地图（带街景）。我用这个代码。当我点击地图上的点时，它可以将街景视图更改为此部分并显示点击点信息。但是如何在点击点添加红色气球标记？然后我点击另一个点，第一个红色气球标记将移动到新点。（只需单击以移动标记，而不是拖动标记）。感谢。

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var myPano;   
    var panoClient;
    var nextPanoId;

    function initialize() {
      var fenwayPark = new GLatLng(42.345573,-71.098326);
      var fenwayPOV = {yaw:370.64659986187695,pitch:-20};

      panoClient = new GStreetviewClient();      

      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(fenwayPark, 15);
      GEvent.addListener(map, "click", function(overlay,latlng) {
        panoClient.getNearestPanorama(latlng, showPanoData);
      });

      myPano = new GStreetviewPanorama(document.getElementById("pano"));
      myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
      GEvent.addListener(myPano, "error", handleNoFlash);  
      panoClient.getNearestPanorama(fenwayPark, showPanoData);
    }

    function showPanoData(panoData) {
      if (panoData.code != 200) {
        GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
        return;
      }
      nextPanoId = panoData.links[0].panoId;
      var displayString = [
        "Panorama ID: " + panoData.location.panoId,
        "LatLng: " + panoData.location.latlng,
        "Copyright: " + panoData.copyright,
        "Description: " + panoData.location.description,
        "Next Pano ID: " + panoData.links[0].panoId
      ].join("<br/>");
      map.openInfoWindowHtml(panoData.location.latlng, displayString);

      GLog.write('Viewer moved to' + panoData.location.latlng);
      myPano.setLocationAndPOV(panoData.location.latlng);
    }

    function next() {
      // Get the next panoId
      // Note that this is not sophisticated. At the end of the block, it will get stuck
      panoClient.getPanoramaById(nextPanoId, showPanoData);
    }

    function handleNoFlash(errorCode) {
      if (errorCode == 603) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
      }
    }  

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 500px; height: 400px"></div>
    <div name="pano" id="pano" style="width: 500px; height: 300px"></div>
    <input type="button" onclick="next()" value="Next"/>
  </body>
</html>

Answer 1

你应该看一下这篇文章。

Google Maps API - Drop a new pin

如何在这个谷歌地图api中添加红色气球标记？

1 个答案: