2017-04-01 33 views
2

谷歌地图API我不是一个开发商,卡在这个panTo()。我想要的是用if-else语句运行此函数,而不加载新的谷歌地图和没有jQuery。哑剧()对于没有的jQuery或PHP

<body> 
    <div id="map"></div> 
    <div> 
     <ul> 
      <li><a href="#" id="abc" onclick="main(1)">A</a></li> 
      <li><a href="#" id="def" onclick="main(2)">B</a></li> 
      <li><a href="#" id="ghi" onclick="main(3)">C</a></li> 
      <li><a href="#" id="jkl" onclick="main(4)">D</a></li> 
     </ul> 
</body> 
</div> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFX2v5z34vYKl0We4nHV4KFV1j6uVsltg&callback=main"></script> 

和功能是:

function main(number) { 
var map; 
var map= { 
    center:new google.maps.LatLng(33.72939,73.09315), 
    zoom:10, 
    }; 

if (number==1) { 
    map.setCenter(51.508742,-0.120850); 
}else if (number==2) { 
    map.setCenter(33.72939,73.09315); 
}else if (number==3) { 
    map.setCenter(33.939445,73.34587); 
}else{ 
    alert("Sorry! No Place found with name ") 
} 
var map1= new google.maps.Map(document.getElementById("map"),map); 
} 
+0

'HREF = “#”'将滚动你的网站上面。你不想那样。 (希望有人会告诉你如何防止同时发布一个答案) –

+0

你可能要编辑您的API密钥,如果适用撤销它。 –

回答

1

应该map.setCenter(latLngObject);map.setCenter("lat", "lng");

// don't complicate using else/if-s. Simplify your code! 
 

 
var locations = { // name : [lat, lng] 
 
    "1" : [51.508742, -0.120850], 
 
    "2" : [33.72939, 73.09315], 
 
    "3" : [33.939445, 73.34587] 
 
}; 
 

 
// Define map Object 
 
var map = new google.maps.Map(document.getElementById("map"), { 
 
    // common map options here 
 
    zoom: 16, 
 
}); 
 

 

 
function main(name){ 
 
    
 
    if(!(name in locations)) return alert("Sorry! No Place found with name: "+ name); 
 
    // Create a new LatLng Object 
 
    var latLng = new google.maps.LatLng(locations[name][0], locations[name][1]); 
 
    map.setCenter(latLng); 
 
} 
 

 

 
// Init map using location name "2" 
 
main("2");
#map{height:200px;} 
 
li {display: inline-block;} li a{cursor: pointer;}
<ul> 
 
    <li><a id="abc" onclick="main(1)">A</a></li> 
 
    <li><a id="def" onclick="main(2)">B</a></li> 
 
    <li><a id="ghi" onclick="main(3)">C</a></li> 
 
    <li><a id="jkl" onclick="main(4)">D</a></li> 
 
</ul> 
 
    
 
<div id="map"></div> 
 
    
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFX2v5z34vYKl0We4nHV4KFV1j6uVsltg"></script>

通知还我个后取出&callback Ë谷歌地图URI