2

这是初始化函数......

        function initialize() {

这里的变量 $Latitude,$Longitude 是数组值，所以我如何将它们存储在 Javascript 变量中，以便它们可以存储上述数组值......

var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
var latlng = new google.maps.LatLng(lat,lon);
var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

在这里，我如何循环地理编码器以使用上述数组变量显示多个区域...

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  geocoder = new google.maps.Geocoder();

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title: "Hello World!"
  });
}
4

4 回答 4

6

它是我的示例代码，通过使用区域名称或 lat, lng在谷歌地图中绘制多个区域。

        var map;
        var geocoder;
        var marker;
        var people = new Array();
        var latlng;
        var infowindow;

        $(document).ready(function() {
            ViewCustInGoogleMap();
        });

        function ViewCustInGoogleMap() {

            var mapOptions = {
                center: new google.maps.LatLng(11.0168445, 76.9558321),   // Coimbatore = (11.0168445, 76.9558321)
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            // Get data from database. It should be like below format or you can alter it.

            var data = '[{ "DisplayText": "adcv", "ADDRESS": "Jamiya Nagar Kovaipudur Coimbatore-641042", "LatitudeLongitude": "10.9435131,76.9383790", "MarkerId": "Customer" },{ "DisplayText": "abcd", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "11.0168445,76.9558321", "MarkerId": "Customer"}]';

            people = JSON.parse(data); 

            for (var i = 0; i < people.length; i++) {
                setMarker(people[i]);
            }

        }

        function setMarker(people) {
            geocoder = new google.maps.Geocoder();
            infowindow = new google.maps.InfoWindow();
            if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
                geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                        marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            draggable: false,
                            html: people["DisplayText"],
                            icon: "images/marker/" + people["MarkerId"] + ".png"
                        });
                        //marker.setPosition(latlng);
                        //map.setCenter(latlng);
                        google.maps.event.addListener(marker, 'click', function(event) {
                            infowindow.setContent(this.html);
                            infowindow.setPosition(event.latLng);
                            infowindow.open(map, this);
                        });
                    }
                    else {
                        alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
                    }
                });
            }
            else {
                var latlngStr = people["LatitudeLongitude"].split(",");
                var lat = parseFloat(latlngStr[0]);
                var lng = parseFloat(latlngStr[1]);
                latlng = new google.maps.LatLng(lat, lng);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    draggable: false,               // cant drag it
                    html: people["DisplayText"]    // Content display on marker click
                    //icon: "images/marker.png"       // Give ur own image
                });
                //marker.setPosition(latlng);
                //map.setCenter(latlng);
                google.maps.event.addListener(marker, 'click', function(event) {
                    infowindow.setContent(this.html);
                    infowindow.setPosition(event.latLng);
                    infowindow.open(map, this);
                });
            }
        }
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>

    <div id="map-canvas" style="width: 800px; height: 500px;">
    </div>

于 2013-08-28T06:26:11.793 回答
1

假设 lat 和 lon 是具有相同长度的 javascript 数组，这应该对您有用：

var map = null;
function initialize() {

var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
// initialize map center on first point
var latlng = new google.maps.LatLng(lat[0],lon[0]);
var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();

for (var i=0, i<lat.length; i++) {
  var latlng = new google.maps.LatLng(lat[i],lon[i]);
  bounds.extend(latlng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "Hello World!"
  });
}
  // zoom and center the map to show all the markers
  map.fitBounds(bounds);
}
于 2013-08-28T13:06:52.337 回答
0 
<?php
    /* lat/lng data will be added to this array */
    try{$work=$_GET["service"];}catch(Exception $e){echo 'Authorization Failed.Map may Misbehave or Buggy.<a href="submitbug.php">Click here to report this</a>';}
    $locations=array();
    $uname="root";
    $pass="";
    $servername="localhost";
    $dbname="bcremote";
    $db=new mysqli($servername,$uname,$pass,$dbname);
    $query =  $db->query('SELECT * FROM location');
    while( $row = $query->fetch_assoc() ){
        $name = $row['uname'];
        $longitude = $row['longitude'];                              
        $latitude = $row['latitude'];
        /* Each row is added as a new array */
        $locations[]=array( 'name'=>$name, 'lat'=>$latitude, 'lng'=>$longitude );
    }
    //echo $locations[0]['name'].": In stock: ".$locations[0]['lat'].", sold: ".$locations[0]['lng'].".<br>";
    //echo $locations[1]['name'].": In stock: ".$locations[1]['lat'].", sold: ".$locations[1]['lng'].".<br>";
?>
<script>
       //var myLatLng = {lat: -25.363, lng: 131.044};
       function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          scrollwheel: false,
          zoom: 4
         });

        <?php for($i=0;$i<sizeof($locations);$i++)
        { ?>
         var marker = new google.maps.Marker({
          map: map,
          position: {lat: <?php echo $locations[$i]['lat']?>,lng: <?php echo $locations[$i]['lng']?>},
          title: 'Service'
        });
        <?php } ?>
       }
</script>

此代码片段使用动态内容，而不使用 JSON 或 XML。下面的代码是我们在浏览器查看源工具中看到的。希望这可以帮助你...

<script>
       //var myLatLng = {lat: -25.363, lng: 131.044};
       function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          scrollwheel: false,
          zoom: 4
         });

                 var marker = new google.maps.Marker({
          map: map,
          position: {lat: 192.652.231.25,lng: 192.652.231.25},
          title: 'Service'
        });
                 var marker = new google.maps.Marker({
          map: map,
          position: {lat: 192.652.231.25,lng: 192.652.231.25},
          title: 'Service'
        });
               }
</script>
于 2017-04-13T11:54:35.687 回答
0

2017 年更新

Google 地图现在支持创建具有多个位置的地图，您可以通过 iframe 嵌入这些地图！来源：https ://www.create.net/support/218-how-to-pin-point-multiple-locations-on-google-maps.html

  1. 转到https://www.google.com/maps

  2. 确保您已登录 - 您可以通过单击右上角的登录按钮来登录。

  3. 在左上角的搜索框旁边，单击菜单图标以展开菜单

  4. 单击“您的地点”、“地图”，然后单击“创建地图”以编辑您的地图。

  5. 将弹出一个新窗口。给你的地图一个标题和描述，然后点击“保存”。

  6. 您现在可以通过单击标记图标并将其直接放置在地图上来手动确定位置，或者使用屏幕顶部的搜索框搜索位置。

  7. 如果您手动添加位置，您可以命名位置并保存以将其添加到地图中。如果您正在搜索和添加特定位置，地图上会出现一个绿色标记，您可以单击“添加到地图”链接。

  8. 对要绘制的每个位置重复步骤 6 和 7。

完成后，再次保存地图并刷新页面。然后，要获取将地图嵌入到 Create 网站的代码，请按照以下步骤操作：

  1. 确保您的地图是公开的。您可以通过单击地图名称下方的“共享”来执行此操作。

  2. 在“谁有权访问”下单击“更改”并将其设置为“打开 - 在网络上公开”并保存。

  3. 接下来，单击菜单图标并单击链接“嵌入我的站点”，然后代码将在新窗口中弹出。

  4. 要使用它，您需要将代码粘贴到您的 Create 帐户上的 HTML 片段中，然后将 HTML 片段放在您选择的页面上。

例子：

<iframe src="https://www.google.com/maps/d/embed?mid=1tX88xmVMIFW9DQneDff_ZMJtekc" width="100%" height="480"></iframe>

于 2017-08-01T02:46:09.767 回答