网站嵌入自定义 google 地图

最新推荐文章于 2025-03-25 17:25:56 发布

Arya Wang

最新推荐文章于 2025-03-25 17:25:56 发布

阅读量1.4k

点赞数 1

分类专栏： Google 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_38865642/article/details/129994918

版权

Q：想在页面上嵌入一个谷歌地图框架。而且可以在同一框架中自定义多个标记。如下：

在这里插入图片描述

A：这里有一个示例，说明如何向地图添加三个标记：

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers Example</title>
    <style>
      #map {
     
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Markers Example</h1>
    <div id="map"></div>
    <script>
      function initMap() {
     
        var locations = [
          ['Location 1', 40.7128, -74.0060],
          ['Location 2', 34.0522, -118.2437],
          ['Location 3', 51.5074, -0.1278]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
     
          zoom: 4,
          center: new google.maps.LatLng(40.7128, -74.0060),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
     
          marker = new google.maps.Marker({
     
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
     
            return function() {
     
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"><