谷歌地图JS API 自定义标注

最新推荐文章于 2020-06-16 18:25:38 发布

nowhere_coder

最新推荐文章于 2020-06-16 18:25:38 发布

阅读量1.4k

点赞数

文章标签： Google map Javascript

本文链接：https://blog.csdn.net/wojiaoljc/article/details/11290763

版权

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

摘要由CSDN通过智能技术生成

<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 co