使用 Google Maps Api 实现多个标记答案

【问题标题】：Implement Multiple Markers with Google Maps Api使用 Google Maps Api 实现多个标记
【发布时间】：2014-11-12 00:12:06
【问题描述】：

使用 WordPress 创建站点，该站点已被编程为在地图上列出一个标记，并在其下方列出其他位置。最终我想删除地图下方的描述，只将位置与地图以及标记在其上的标记一起列出。

<body>
    <div class="corporateMap"></div>
</body>
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> 
            <script> 
                google.maps.event.addDomListener(window, 'load', init);
                var map;
                var locationPhone= '<?php echo $locationPhone; ?>';
                var locationTitle = '<?php echo $locationTitle; ?>';
                var locationLat = '<?php echo $locationLat; ?>';
                var locationLong = '<?php echo $locationLong; ?>';
                function init() {
                    var mapOptions = {
                        center: new google.maps.LatLng(locationLat,locationLong),
                        zoom: 15,
                        zoomControl: true,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.DEFAULT,
                        },
                        disableDoubleClickZoom: true,
                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                        },
                        scaleControl: true,
                        scrollwheel: false,
                        panControl: false,
                        streetViewControl: false,
                        draggable : true,
                        overviewMapControl: false,
                        overviewMapControlOptions: {
                            opened: false,
                        },
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        styles: [
              { stylers: [{ saturation: -100 }, { gamma: 1 }] },
              { elementType: "labels.text.stroke", stylers: [{ visibility: "off" }] },
              { featureType: "poi.business", elementType: "labels.text", stylers: [{ visibility: "off" }] },
              { featureType: "poi.business", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
              { featureType: "poi.place_of_worship", elementType: "labels.text", stylers: [{ visibility: "off" }] },
              { featureType: "poi.place_of_worship", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
              { featureType: "road", elementType: "geometry", stylers: [{ visibility: "simplified" }] },
              { featureType: "water", stylers: [{ visibility: "on" }, { saturation: 50 }, { gamma: 0 }, { hue: "#50a5d1" }] },
              { featureType: "administrative.neighborhood", elementType: "labels.text.fill", stylers: [{ color: "#333333" }] },
              { featureType: "road.local", elementType: "labels.text", stylers: [{ weight: 0.5 }, { color: "#333333" }] },
              { featureType: "transit.station", elementType: "labels.icon", stylers: [{ gamma: 1 }, { saturation: 50 }] }
            ],
                    }
                    var mapElement = document.getElementById('corporateMap');
                    var map = new google.maps.Map(mapElement, mapOptions);
                    var locations = [
            [locationTitle, 'undefined', locationPhone, 'undefined', 'http://www.fptscrap.com/', locationLat, locationLong]
                    ];
                    for (i = 0; i < locations.length; i++) {
                        if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
                        if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
                        if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
                        if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
                        marker = new google.maps.Marker({
                            icon: '',
                            position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                            map: map,
                            title: locations[i][0],
                            desc: description,
                            tel: telephone,
                            email: email,
                            web: web
                        });
                        bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web);
                    }
             function bindInfoWindow(marker, map, title, desc, telephone, email, web) {
            if (web.substring(0, 7) != "http://") {
            link = "http://" + web;
            } else {
            link = web;
            }
                  google.maps.event.addListener(marker, 'click', function() {
                        var html= "<div style='color:#000;background-color:#fff;padding:5px;width:210px;'><h4>"+title+"</h4><p>"+telephone+"<p><a href='"+link+"'' >"+web+"<a></div>";
                        iw = new google.maps.InfoWindow({content:html});
                        iw.open(map,marker);
                    });
                }
            }
            </script>
        <?php } else {

        } ?>

【问题讨论】：

提供正确的代码。这里没有html代码

标签： javascript php wordpress google-maps-api-3

【解决方案1】：

代码已经在地图上放置了所有标记（如果存在），问题在于这些行：

var locationPhone= '<?php echo $locationPhone; ?>';
var locationTitle = '<?php echo $locationTitle; ?>';
var locationLat = '<?php echo $locationLat; ?>';
var locationLong = '<?php echo $locationLong; ?>';

在这里您需要更改 php 部分以回显位置数组（或者如果您不想/无法访问 php，只需对其进行硬编码），然后在此处分配新数组：

var locations = [
    [locationTitle, 'undefined', locationPhone, 'undefined', 'http://www.fptscrap.com/', locationLat, locationLong]
];

【讨论】：