更改地图视图而无需更改位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更改地图视图而无需更改位置相关的知识，希望对你有一定的参考价值。
我有一个默认标记（连接用户的地址）和其他标记（数组中传递的地址）的地图，我有一个选择输入，地址在数组中传递，我喜欢当选择选项更改地图的视图更改时选定选项的标记，是否可以在不更改默认标记的默认位置的情况下实现此选项？
答案
对的，这是可能的。当您的选择输入的'更改'事件被触发时，只需使用新的标记变量创建一个新的Google Maps Javascript API Marker。
您可以查看下面的示例代码：
var map;
function initMap() {
var defaultLoc = { "lat" : 37.7749295, "lng" :-122.4194155 };
map = new google.maps.Map(document.getElementById('map'), {
center: defaultLoc,
zoom: 8
});
var markerDefault = new google.maps.Marker({
position : defaultLoc,
map : map
});
document.getElementById('menuLoc').addEventListener('change', function(){
var that = this;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: that.value
}, function(result, status){
if ( status === 'OK' ) {
var newMarker = new google.maps.Marker({
position : result[0].geometry.location,
map: map
});
map.setCenter(result[0].geometry.location);
}
});
});
} /* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #FFF;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
} <div id="floating-panel">
<select id="menuLoc">
<option value="fresno, ca, USA">Fresno</option>
<option value="sacramento, ca, usa">Sacramento</option>
<option value="carson city">Carson City</option>
</select>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"
async defer></script>以上是关于更改地图视图而无需更改位置的主要内容，如果未能解决你的问题，请参考以下文章