谷歌地图添加地点标记和点击事件

最新推荐文章于 2022-07-05 10:11:22 发布

不会代码的小林

最新推荐文章于 2022-07-05 10:11:22 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46105038/article/details/111219301

版权

JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7P_WZozboepB5hMUR76KByp_5duUo6U4&sensor=false"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

<script>
function initialize(){
var mapProp = {
  center:new google.maps.LatLng(-31.56391,147.154312),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
   
  //遍历locations数组，添加到地图上
  const markers = locations.map((location, i) => {
  var marker=new google.maps.Marker({
  position:location,
  map: map,
    });
  //监听marker的点击事件
   marker.addListener('click', function() {
   alert('spots index:'+i);
    }); 
  });   
}

const locations = [
  { lat: -31.56391, lng: 147.154312 },
  { lat: -33.718234, lng: 150.363181 },
  { lat: -33.727111, lng: 150.371124 },
  { lat: -33.848588, lng: 151.209834 },
  { lat: -33.851702, lng: 151.216968 },
  { lat: -34.671264, lng: 150.863657 },
  { lat: -35.304724, lng: 148.662905 },
  { lat: -36.817685, lng: 175.699196 },
  { lat: -36.828611, lng: 175.790222 },
  { lat: -37.75, lng: 145.116667 },
  { lat: -37.759859, lng: 145.128708 },
  { lat: -37.765015, lng: 145.133858 },
  { lat: -37.770104, lng: 145.143299 },
  { lat: -37.7737, lng: 145.145187 },
  { lat: -37.774785, lng: 145.137978 },
  { lat: -37.819616, lng: 144.968119 },
  { lat: -38.330766, lng: 144.695692 },
  { lat: -39.927193, lng: 175.053218 },
  { lat: -41.330162, lng: 174.865694 },
  { lat: -42.734358, lng: 147.439506 },
  { lat: -42.734358, lng: 147.501315 },
  { lat: -42.735258, lng: 147.438 },
  { lat: -43.999792, lng: 170.463352 },
];
google.maps.event.addDomListener(window, 'load', initialize);
</script>

在这里插入图片描述

不会代码的小林

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
谷歌地图添加地点标记和点击事件

<html><head><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7P_WZozboepB5hMUR76KByp_5duUo6U4&sensor=false"></script></head><body><div id="googleMap" style="width:500px;height:380px;"></d
复制链接

扫一扫