无法在WordPress模板

时间：2016-03-30 19:03:02

标签： javascript google-maps

我一直在尝试修改WordPress模板中的Google地图实施，而不是带有标记的单个地图（可行），用户可以从列表中选择一个位置。然后，单击事件应移动标记，使地图居中，并理想地设置新的缩放级别。我已经糊里糊涂了几个小时，但是我缺乏Javascript知识正在阻碍。

我已经制作了JSFiddle，以防万一。

真诚地希望有人愿意提供帮助。提前谢谢！

＆＃13;
＆＃13; 
function pan(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);

		marker.setPosition( panPoint );
    map.panTo(panPoint);
//		map.setZoom(3);  // This would have to be dynamic, based on data-zoom
}

google_api_map_init_259585579();
function google_api_map_init_259585579(){
var map;
var coordData = new google.maps.LatLng(parseFloat(3.165612), parseFloat(101.6504025));
var marker;

var styleArray = [
    {
        "featureType": "landscape",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 65
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 51
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 30
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -100
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "hue": "#ffff00"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -97
            }
        ]
    }
]

function initialize() {
    var mapOptions = {
							zoom: 5,
							center: coordData,
							scrollwheel: false,
                			styles: styleArray 
						}
    var map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);

    var markerIcon = { 
			                url: "http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png", 
			                size: new google.maps.Size(72, 74), 
			                origin: new google.maps.Point(0,0), 
			                anchor: new google.maps.Point(30, 74) 
			            };


						marker = new google.maps.Marker({
							map:map,
							draggable:false,
							position: coordData,
							icon: markerIcon
						});

    $('.location').on('click', function () {
        pan($(this).data('coords'));
        $( "#location-output" ).text($(this).data('location'));
    });

}

google.maps.event.addDomListener(window, 'load', initialize);
}
＆＃13; 
html, body, #map-canvas-259585579 {
  height: 570px;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?v=3.exp&#038;sensor=false&#038;ver=4.4.2'></script>
<ul>
  <li><a class="location" data-zoom="5" data-coords="3.1656120,101.6504025" data-location="Kuala Lumpur">Malaysia</a></li>
  <li><a class="location" data-zoom="12" data-coords="-6.2257931,106.8059866" data-location="Jakarta">Indonesia</a></li>
  <li><a class="location" data-zoom="8" data-coords="25.1951156,55.2747310" data-location="Dubai">United Arab Emirates (UAE)</a></li>
</ul>

<div id="location-output"></div>

<div class="google-map-api map-1">
  <div id="map-canvas-259585579" class="gmap"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

map无法访问变量marker和pan()。

可能的解决方案：将这些变量作为参数传递给pan()：

＆＃13;
＆＃13; 
function pan(latlon,map,marker) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);

		marker.setPosition( panPoint );
    map.panTo(panPoint);
//		map.setZoom(3);  // This would have to be dynamic, based on data-zoom
}

google_api_map_init_259585579();
function google_api_map_init_259585579(){
var map;
var coordData = new google.maps.LatLng(parseFloat(3.165612), parseFloat(101.6504025));
var marker;

var styleArray = [
    {
        "featureType": "landscape",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 65
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 51
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 30
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -100
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "hue": "#ffff00"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -97
            }
        ]
    }
]

function initialize() {
    var mapOptions = {
							zoom: 5,
							center: coordData,
							scrollwheel: false,
                			styles: styleArray 
						}
    var map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);

    var markerIcon = { 
			                url: "http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png", 
			                size: new google.maps.Size(72, 74), 
			                origin: new google.maps.Point(0,0), 
			                anchor: new google.maps.Point(30, 74) 
			            };


						marker = new google.maps.Marker({
							map:map,
							draggable:false,
							position: coordData,
							icon: markerIcon
						});

    $('.location').on('click', function () {
        pan($(this).data('coords'),map,marker);
        $( "#location-output" ).text($(this).data('location'));
    });

}

google.maps.event.addDomListener(window, 'load', initialize);
}
＆＃13; 
html, body, #map-canvas-259585579 {
  height: 570px;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?v=3.exp&#038;sensor=false&#038;ver=4.4.2'></script>
<ul>
  <li><a class="location" data-zoom="5" data-coords="3.1656120,101.6504025" data-location="Kuala Lumpur">Malaysia</a></li>
  <li><a class="location" data-zoom="12" data-coords="-6.2257931,106.8059866" data-location="Jakarta">Indonesia</a></li>
  <li><a class="location" data-zoom="8" data-coords="25.1951156,55.2747310" data-location="Dubai">United Arab Emirates (UAE)</a></li>
</ul>

<div id="location-output"></div>

<div class="google-map-api map-1">
  <div id="map-canvas-259585579" class="gmap"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

一种选择是将marker和map变量都设为全局变量。 

var map, marker;
function pan(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);
    marker.setPosition( panPoint );
    map.panTo(panPoint);
}

然后初始化initialize函数中的全局值：

function initialize() {
  // ...
  map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);
  // ...
  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    position: coordData,
    icon: markerIcon
  });

updated fiddle

updated fiddle with marker shadow in correct place（原生Google Maps Javascript API v3不再支持标记阴影）

代码段

＆＃13;
＆＃13; 
var map, marker;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  marker.setPosition(panPoint);
  map.panTo(panPoint);
}

google_api_map_init_259585579();

function google_api_map_init_259585579() {
  var coordData = new google.maps.LatLng(parseFloat(3.165612), parseFloat(101.6504025));


  function initialize() {
    var mapOptions = {
      zoom: 5,
      center: coordData,
      scrollwheel: false,
      styles: styleArray
    }
    map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);

    var markerIcon = {
      url: "http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png",
      size: new google.maps.Size(72, 74),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(30, 74)
    };


    marker = new google.maps.Marker({
      map: map,
      draggable: false,
      position: coordData,
      icon: markerIcon
    });

    $('.location').on('click', function() {
      pan($(this).data('coords'));
      $("#location-output").text($(this).data('location'));
    });

  }

  google.maps.event.addDomListener(window, 'load', initialize);
}
var styleArray = [{
  "featureType": "landscape",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 65
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "poi",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 51
  }, {
    "visibility": "simplified"
  }]
}, {
  "featureType": "road.highway",
  "stylers": [{
    "saturation": -100
  }, {
    "visibility": "simplified"
  }]
}, {
  "featureType": "road.arterial",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 30
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "road.local",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 40
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "transit",
  "stylers": [{
    "saturation": -100
  }, {
    "visibility": "simplified"
  }]
}, {
  "featureType": "administrative.province",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": -25
  }, {
    "saturation": -100
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "hue": "#ffff00"
  }, {
    "lightness": -25
  }, {
    "saturation": -97
  }]
}]
＆＃13; 
html,
body,
.gmap,
.google-map-api {
  height: 100%;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<ul>
  <li><a class="location" data-zoom="5" data-coords="3.1656120,101.6504025" data-location="Kuala Lumpur">Malaysia</a>
  </li>
  <li><a class="location" data-zoom="12" data-coords="-6.2257931,106.8059866" data-location="Jakarta">Indonesia</a>
  </li>
  <li><a class="location" data-zoom="8" data-coords="25.1951156,55.2747310" data-location="Dubai">United Arab Emirates (UAE)</a>
  </li>
</ul>

<div id="location-output"></div>

<div class="google-map-api map-1">
  <div id="map-canvas-259585579" class="gmap"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题