我目前在一个页面上有多个div,每个div在点击时提供一个地图。我从div lat
attr获取long
data
个数据并将其解析为函数。
DEMO http://jsfiddle.net/x8dSP/2441/
我希望能够添加多个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]
});
};
答案 0 :(得分:0)
好的,试试吧。检查评论是否清晰。单击红色<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>