javascript - 在 href Click 上加载 Google map 中的位置

Question

我想在 href 点击时加载 Google 不同的坐标。例如

<a href="#location1">Location 1</a>
<a href="#location2">Location 2</a>
<a href="#location3">Location 3</a>

下面有一个 DIV，它加载 Google map ，该 map 加载来自上述链接的位置。

<div id="map-container" class="col-md-12 no-gutter" style="height:500px;"></div>

这是加载具有单个位置的 map 的脚本。

<script type="text/javascript">
    function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(51.520904, -0.107466),
                zoom: 17,
                draggable: false,
                scrollwheel: false,
                disableDoubleClickZoom: true,
                zoomControl: false
            };
            var map = new google.maps.Map(document.getElementById("map-container"),
                mapOptions);

            var styles = [
                {
                    featureType: "landscape.man_made",
                    elementType: "geometry",
                    stylers: [
                        { visibility: "on" },
                        { color: "#d4ebf4" }
                    ]
                },
                {
                    featureType: "road",
                    elementType: "labels.text.fill",
                    stylers: [
                        { visibility: "on" },
                        { color: "#202020"}
                    ]
                },
                {
                    featureType: "poi.business",
                    elementType: "all",
                    stylers: [
                        { visibility: "on" }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "all",
                    stylers: [
                        { color: "#98d1e8" }
                    ]
                },
                {
                    featureType: "poi.school",
                    elementType: "all",
                    stylers: [
                        { visibility: "off" },
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "all",
                    elementType: "geometry.stroke",
                    stylers: [
                        { visibility: "off" }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "labels.text.fill",
                    stylers: [
                        { visibility: "off" }
                    ]
                },
                {
                    featureType: "transit.station.rail",
                    elementType: "labels.icon",
                    stylers: [
                        { hue: "#005eff" },
                        { saturation: -37 }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "labels.text.stroke",
                    stylers: [
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "road.local",
                    elementType: "all",
                    stylers: [
                        { color: "#ffffff" }
                    ]
                },
                {
                    featureType: "all",
                    elementType: "labels.text.fill",
                    stylers: [
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "transit.line",
                    elementType: "all",
                    stylers: [
                        { color: "#ffffff" }
                    ]
                }
            ];

            map.setOptions({styles: styles});


            var blueIco = {
                url: "<?php bloginfo('template_directory'); ?>/images/map-pin.png",
                size: new google.maps.Size(55, 73),
                anchor: new google.maps.Point(28, 72)
            };

            var latLng = new google.maps.LatLng(51.520904, -0.107466);

            marker = new google.maps.Marker({
                map: map,
                position: latLng,
                animation: google.maps.Animation.DROP,
                icon: blueIco,
                normalIcon: blueIco
            });

            google.maps.event.addListener(marker, "mouseout", function (event) {
                this.setIcon(this.normalIcon);
                infowindow.close();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

为什么不使用一些 Google map API 来让它变得更容易。就像

Maplace

这是一个

Codepen Demo

和代码:

HTML

<div id="gmap"></div>

<div id="menu">
  <a href="javascript:void(0);" class="loc_link" data-lat="12.58" data-long="77.38" data-title="Bangalore" data-html="Bangalore, Karnataka, India">A</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="31.2" data-long="121.5" data-title="Shanghai" data-html="Shanghai, China">B</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="35.6895" data-long="139.6917" data-title="Tokyo" data-html="Tokyo, Japan">C</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="28.6139" data-long="77.2089" data-title="New Delhi" data-html="New Delhi, India">D</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="40.7127" data-long="74.0059" data-title="New York" data-html="New York City">E</a>

 <br/>
  <span id="tool_tip">Click links to see effect!</span>
</div>

CSS

#gmap{
width: 70%;
height: 350px;
margin: 0 auto;
}

#menu {
 width: 300px;
 margin: 15px auto;
 text-align:center;
}
#menu a.loc_link {
 background: #0f89cf;
 color: #fff;
 margin-right: 10px;
 display: inline-block;
 margin-bottom:10px;
 padding: 5px;
 border-radius: 3px;
 text-decoration: none;
}
#menu span#tool_tip {
  display: inline-block;
  margin-top: 10px;
}

JQuery

$(function(){
var map;
var LocA = [{
    lat: 12.58,
    lon: 77.38,
    title: 'Bangalore',
    html: 'Bangalore, Karnataka, India',
    zoom: 4,
    icon: 'http://maps.google.com/mapfiles/markerA.png',
    animation: google.maps.Animation.DROP
 }];

map = new Maplace({
  locations: LocA,
  map_div: '#gmap',
  generate_controls: false,
  start: 0   
}).Load();


$(".loc_link").click(function(){
  var newLoc = [{
      lat: $(this).data('lat'),
      lon: $(this).data('long'),
      title: $(this).data('title'),
      html: $(this).data('html'),
      zoom: 4,
      icon: 'http://maps.google.com/mapfiles/marker'+$(this).text()+'.png',
    animation:google.maps.Animation.DROP
  }];
 map.AddLocations(newLoc).Load();
 map.ViewOnMap($(this).index()+1);
});
});