Question

我目前在一个页面上有多个div，每个div在点击时提供一个地图。我从div lat attr获取long data个数据并将其解析为函数。

我希望能够添加多个lat / long数据集吗？目前的设置：

HTML

<div id="map" class="map map1" data-no="1" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map2" class="map map2" data-no="2" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map3" class="map map3" data-no="3" data-lat="40.747688" data-long="-74.004142"></div>
<div id="map4" class="map map4" data-no="4" data-lat="40.747688" data-long="-74.004142"></div>

JS

var map = [];
function mapOneInitialize(index,lat,long) {
    var centerPosition = new google.maps.LatLng(lat,long)

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map[index] = new google.maps.Map($('div[data-no="'+index+'"]')[0], options);

    var marker = new google.maps.Marker({
        position: centerPosition,
        map: map[index]
    });
};

Answer 1

好的，试试吧。检查评论是否清晰。单击红色<div>以在其坐标处添加标记。我从评论中链接到你的问题中得到了基本的想法：

Google Maps JS API v3 - Simple Multiple Marker Example

<强> HTML / JS

<!DOCTYPE html>
<html> 
   <head> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
      <title>Get Map Markers from Divs</title> 
      <style>
         #mainMap{
            width: 200px;
            height: 200px;
         }
         .map{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
         }
      </style>
      <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script>

         /**
          * Add a marker to our map
          * @param {google.maps.Map} map The map to append to
          * @param {Number} lat The lattitude
          * @param {Number} long The longitude
          * @returns {google.maps.Marker} The marker we made
          */
         function addMarker(map, lat, long) {
            return new google.maps.Marker({
               position: new google.maps.LatLng(lat, long),
               map: map
            });
         }

         /**
          * Create our google map setting its starting position
          * @param {DOM Element} mainMapDomElement What div to turn into a map
          * @returns {google.maps.Map}
          */
         function makeMainMap(mainMapDomElement) {
            return new google.maps.Map(mainMapDomElement, {
               zoom: 10,
               center: new google.maps.LatLng(40.747688, -74.004142),
               mapTypeId: google.maps.MapTypeId.ROADMAP
            });
         }

         /**
          * Get the lat and long attributes from our div
          * @param {DOM Element} The div to get the lat and long from
          * @returns {Object}
          */
         function getLatLong(domElement) {
            return {
               lat: domElement.getAttribute("data-lat"),
               long: domElement.getAttribute("data-long")
            };
         }

         /**
          * Have our divs listen for clicks to make them append to map
          * @param {DOM Element} domElement The element to add the listener to
          * @param {google.maps.Map} map The map to append to
          * @returns {undefined}
          */
         function addMapClickListener(domElement, map) {
            domElement.addEventListener("click", function() {
               var latLong = getLatLong(this);
               addMarker(map, latLong.lat, latLong.long);
            });
         }

         /**
          * Starting point for our map project
          * @returns {undefined}
          */
         function main() {
            var
                    // Get the div to append the map to
                    mainMapDiv = document.getElementById("mainMap"),
                    // Get all the elements with the "map" class that have our coords
                    mapDivs = document.getElementsByClassName("map"),
                    //Our main google map
                    mainMap,
                    // Holder for lat and long
                    latLong,
                    // Counter
                    i = 0;

            // Create our main map
            mainMap = makeMainMap(mainMapDiv);

            // Have our divs listen for clicks
            for (i = 0; i < mapDivs.length; i++) {
               addMapClickListener(mapDivs[i], mainMap);
            }
         }
      </script>
   </head> 
   <body onload="main();">
      <div id="mainMap"></div>
      <div id="map1" class="map" data-no="1" data-lat="40.747688" data-long="-74.004142"></div>
      <div id="map2" class="map" data-no="2" data-lat="40.757688" data-long="-74.014142"></div>
      <div id="map3" class="map" data-no="3" data-lat="40.767688" data-long="-74.024142"></div>
      <div id="map4" class="map" data-no="4" data-lat="40.777688" data-long="-74.034142"></div>
   </body>
</html>

将div数据解析为JavaScript函数

1 个答案: