谷歌地图JS API 自定义标注

最新推荐文章于 2024-08-24 21:54:56 发布

原创最新推荐文章于 2024-08-24 21:54:56 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Google map #Javascript

这篇博客展示了如何使用谷歌地图JavaScript API创建一个地图，并在地图上添加自定义标注。通过设定地图的中心坐标，设置缩放级别以及类型，然后创建Marker对象并在其上添加信息窗口，实现了点击标注后显示详细信息。

<html>  
<head>  
<title></title>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript">  
var map;   
function load() {   
var myLatlng = new google.maps.LatLng(23.043247, 113.385681); //设置地图的中心坐标   
var myOptions = {   
//这里的参数可以为多个参数，具体参考MapOptions对象   
zoom: 17,   
center: myLatlng,   
mapTypeId: google.maps.MapTypeId.ROADMAP   
};   
map = new google.maps.Map(document.getElementById("map"), myOptions);   
var marker = new google.maps.Marker({   
//可以为多个参数，具体参考MarkerOptions对象   
map: map,   
position: myLatlng   
});   
//google.maps.event.addListener(marker, 'click', function(event) { 
//说明：上面的是实现当点击时出现相关名称，这里没有启用，而是直接显示  
//这里的infoWindow的 参数可以为多个对象，具体可以参考InfoWindowOptions对象   
var html = '<div ><font color="blue">广工大西十一栋301</font></div>';   
var infowindow = new google.maps.InfoWindow({ content: html });   
infowindow.open(map, marker);      
}   
</script>  
</head>  
<body onLoad="load()">  
<div id="map" style="width:600px; height:400px"></div>    
</body>  
</html>