javascript - 多个地点谷歌地图

标签 javascript google-maps

如何在谷歌地图上显示多个位置。 我正在将此代码用于谷歌地图?

<script type="text/javascript">
          $(function() { // when the document is ready to be manipulated.

              if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's
                  var map = document.getElementById("myMap"); // Get div element
                  var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.

                  var longArray= ("<?php echo $long; ?>").split(',');
                  var latArray= ("<?php echo $lat; ?>").split(',');

                 for(i=0;i<longArray.length;i++)
                 {
                     m.setCenter(new GLatLng(latArray[i], longArray[i]), 13); // pass in latitude, longitude, and zoom level.
                     m.openInfoWindow(m.getCenter(), document.createTextNode("This is testing")); // displays the text

                 }

                m.setMapType(G_SATELLITE_MAP); // sets the default mode. G_NORMAL_MAP, G_HYBRID_MAP

                    var c = new GMapTypeControl(); // switch map modes
                    m.addControl(c);

                    m.addControl(new GLargeMapControl()); // creates the zoom feature


              }
              else {
                  alert("Upgrade your browser, man!");
              }
          });
      </script>

最佳答案

请参阅下面的代码,它对我来说效果很好。 下面的代码片段会给您提供有效 API key 的错误,即“Google Maps JavaScript API 错误:InvalidKeyMapError”,要解决此问题,您唯一需要的是 google map 提供的有效 API key 。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Multiple Locations using Google Maps </title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
</head>
<body>
    <div id="googleMap" style="width: 500px; height: 400px;"></div>

    <script type="text/javascript">
    var locationArray = [
      ['Pune', 18.5248904, 73.7228789, 1],
      ['Mumbai', 19.0825223, 72.7410977, 2],
      ['Ahmednagar', 19.1104918, 74.6728675, 3],
      ['Surat', 21.1594627, 77.3507354, 4],
      ['Indore', 22.7242284, 75.7237617, 5]
    ];

    var map = new google.maps.Map(document.getElementById('googleMap'), {
      zoom: 8,
      center: new google.maps.LatLng(18.5248904,73.7228789),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locationArray.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locationArray[i][1], locationArray[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locationArray[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
</body>
</html>

更多详情请参阅here 。我希望这就是您正在寻找的!

关于javascript - 多个地点谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4590873/

相关文章:

javascript - 如何根据json文件生成热图

javascript - 将 javascript map 合并到 Angular 中

javascript - 通过 jQuery 获取整个 HTML 文档,无论顶级元素如何

javascript - 按钮不会调用 JavaScript 中的函数?

javascript - 将 Ruby on Rails 与 Epub.js 集成

javascript - 使用ajax将php数组传递给javascript

javascript - 在静态谷歌地图上绘制路线

JavaScript 正则表达式 : replace matched strings in between two strings

javascript - 插件附加脚本与 jpm run 很好,但与实际的 xpi 不一样

android - 如何将我的数据库的 AsyncTask 与 android 中的谷歌地图结合起来?