Javascript 放大后标记未放置在正确位置
放大谷歌地图后，标记在谷歌地图中的位置不正确Javascript 放大后标记未放置在正确位置,javascript,jquery,html,google-maps,Javascript,Jquery,Html,Google Maps,放大谷歌地图后，标记在谷歌地图中的位置不正确 -标记发生在错误的位置，但坐标是正确的，所以我不知道代码中有什么问题。 有人能帮忙吗？？ 下面是代码： <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.m
-标记发生在错误的位置，但坐标是正确的，所以我不知道代码中有什么问题。
有人能帮忙吗？？ 下面是代码：
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<script type="text/javascript">
$(function () {
var lat = 39.399872,
lng = -8.224454,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng":event.latLng
}, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
}
});
</script>
</head>
<body>
Address:
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<br>
latitude:<input name="latitude" class="MapLat" value="" type="text" placeholder="Latitude" style="width: 161px;" disabled>
longitude:<input name="longitude" class="MapLon" value="" type="text" placeholder="Longitude" style="width: 161px;" disabled>
<div id="map_canvas" style="height: 275px;width: 800px;margin: 0.6em;"></div>
</body>
</html>
无标题文件
$（函数（）{
var lat=39.399872，
液化天然气=-8.224454，
latlng=新的google.maps.latlng（lat，lng），
图像处理http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
变量映射选项={
中心：新google.maps.LatLng（lat，lng），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.TOP_左
}
},
map=new google.maps.map（document.getElementById（'map_canvas'）、mapOptions），
marker=新的google.maps.marker({
位置：latlng，
地图：地图，
图标：图像
});
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入{
类型：[“地理编码”]
});
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（事件）{
infowindow.close（）；
var place=autocomplete.getPlace（）；
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
moveMarker（place.name、place.geometry.location）；
$（'.MapLat'）.val（place.geometry.location.lat（））；
$（'.MapLon'）.val（place.geometry.location.lng（））；
});
google.maps.event.addListener（映射，'click'，函数（事件）{
$（'.MapLat'）.val（event.latLng.lat（））；
$（'.MapLon'）.val（event.latLng.lng（））；
infowindow.close（）；
var geocoder=new google.maps.geocoder（）；
地理编码({
“latLng”：event.latLng
}，功能（结果、状态）{
控制台日志（结果、状态）；
if（status==google.maps.GeocoderStatus.OK）{
控制台日志（结果）；
var lat=results[0]。geometry.location.lat（），
lng=结果[0]。几何体。位置。lng（），
placeName=results[0]。地址\u组件[0]。长\u名称，
latlng=新的google.maps.latlng（lat，lng）；
移动标记（地名、latlng）；
$（“#searchTextField”）.val（结果[0]。格式化的_地址）；
}
});
});
功能移动标记（地名、latlng）{
marker.setIcon（图像）；
标记器设置位置（板条）；
infowindow.setContent（placeName）；
}
});
地址:
纬度：
经度：