-1
WordPressのテンプレートでGoogleマップの実装を変更しようとしましたが、マーカー付きの単一のマップ（動作する）ではなく、リストからの位置。クリックイベントはマーカーを移動し、地図を中央に置き、理想的には新しいズームレベルを設定する必要があります。私は数時間一緒に混乱してきたが、私のJavascriptの知識の欠如は途方に暮れている。WordPressテンプレートでmarker.setPositionとmap.panToを使用できません
有用な場合は、JSFiddleを作成しました。
本当に誰かが喜んで助けてくれることを願っています。前もって感謝します！
function pan(latlon) {
var coords = latlon.split(",");
var panPoint = new google.maps.LatLng(coords[0], coords[1]);
\t \t marker.setPosition(panPoint);
map.panTo(panPoint);
// \t \t 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 = {
\t \t \t \t \t \t \t zoom: 5,
\t \t \t \t \t \t \t center: coordData,
\t \t \t \t \t \t \t scrollwheel: false,
\t \t \t styles: styleArray
\t \t \t \t \t \t }
var map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);
var markerIcon = {
\t \t \t url: "http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png",
\t \t \t size: new google.maps.Size(72, 74),
\t \t \t origin: new google.maps.Point(0,0),
\t \t \t anchor: new google.maps.Point(30, 74)
\t \t \t };
\t \t \t \t \t \t marker = new google.maps.Marker({
\t \t \t \t \t \t \t map:map,
\t \t \t \t \t \t \t draggable:false,
\t \t \t \t \t \t \t position: coordData,
\t \t \t \t \t \t \t icon: markerIcon
\t \t \t \t \t \t });
$('.location').on('click', function() {
pan($(this).data('coords'));
$("#location-output").text($(this).data('location'));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}html, body, #map-canvas-259585579 {
height: 570px;
width: 100%;
}<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&sensor=false&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>
優秀！ JSFiddleの仕事をしました:)残念ながら、WPテンプレートにコードを実装しようとすると、私はまだエラーが出ます： "Uncaught TypeError：未定義のプロパティ 'split'を読み込めません。私はあなたの答えをどのような場合でも解決策としてマークしたと思います！ – Marteyn
これはおそらく、 'pan'関数を間違って呼び出すことを意味しています（または、あなたが書いたコードが少なくともどのように呼び出されるかとは異なります）。その引数は" latitude、longitude "という形式の文字列ではありません。 – geocodezip