设置谷歌地图标记JavaScript [英] setting google maps marker javascript
本文介绍了设置谷歌地图标记JavaScript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将自定义Google地图嵌入我的主页(在联系人下) - 但是如何在地图上设置标记并将其映射到正确的位置?
除了HTML为:
< script src =https://maps.googleapis.com/maps/api/js> ;< /脚本>
< script src =map.js>< / script>
function initialize(){
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center:new google.maps.LatLng(44.5403,-78.5463),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(mapCanvas,mapOptions)
}
google.maps.event.addDomListener(window,'load',initialize);
解决方案
在初始化函数中,需要添加 var marker
变量。以下是点击时在地图上设置标记的简单示例。希望得到这种帮助
function initializeMap(){var options = {center:new google.maps.LatLng(21.1569,106.113),zoom:15 }; map = new google.maps.Map(document.getElementById('map-canvas'),options); directionsDisplay = new google.maps.DirectionsRenderer(); infoWindow = new google.maps.InfoWindow(); marker = new google.maps.Marker(); directionsDisplay.setMap(map);} google.maps.event.addListener(map,'click',function(event){placeMarker(event.latLng);}); function placeMarker(location){geocoder.geocode({latLng:位置},函数(响应,状态){if(status == google.maps.GeocoderStatus.OK){console.log(response); if(response [0]){marker.setMap(map); marker.setPosition位置); infoWindow.setContent(response [0] .formatted_address); infoWindow.open(map,marker);}}});}
I embed custom google map to my homepage (under contact) - but how to set the marker on the map and map itself on the right place?
addition to html was:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="map.js"></script>
and js code is:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
解决方案
In initialize function you need add var marker
variable. Below is simple example to set marker on map when click. Hope this help
function initializeMap() {
var options = {
center: new google.maps.LatLng(21.1569, 106.113),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay = new google.maps.DirectionsRenderer();
infoWindow = new google.maps.InfoWindow();
marker = new google.maps.Marker();
directionsDisplay.setMap(map);
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
geocoder.geocode({latLng : location}, function(response, status){
if (status == google.maps.GeocoderStatus.OK) {
console.log(response);
if (response[0]) {
marker.setMap(map);
marker.setPosition(location);
infoWindow.setContent(response[0].formatted_address);
infoWindow.open(map, marker);
}
}
});
}
这篇关于设置谷歌地图标记JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文