将div数据解析为JavaScript函数
我目前在一个页面上有多个div，每个div在单击时提供一个地图。我从div将div数据解析为JavaScript函数,javascript,html,Javascript,Html,我目前在一个页面上有多个div，每个div在单击时提供一个地图。我从divdataattr中获取latlong数据，并将其解析为函数 演示 我希望能够添加多个lat/long数据集？当前设置： HTML 好的，试试这个。检查注释是否清晰。单击红色的s以在其坐标处添加标记。我从我在评论中链接到您的问题中得到了基本想法： HTML/JS <!DOCTYPE html> <html> <head> <meta http-equiv="c
datalatlong好的，试试这个。检查注释是否清晰。单击红色的
<!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获取地图标记
#主地图{
宽度：200px；
高度：200px；
}
.地图{
宽度：100px；
高度：100px；
背景：红色；
利润率：10px；
}
/**
*在我们的地图上添加一个标记
*@param{google.maps.Map}映射要附加到的映射
*在格子上@param{Number}
*@param{Number}经度
*@returns{google.maps.Marker}我们制作的标记
*/
功能添加标记（地图、横向、纵向）{
返回新的google.maps.Marker({
位置：新google.maps.LatLng（lat，long），
地图：地图
});
}
/**
*创建我们的谷歌地图设置其起始位置
*@param{DOM Element}mainmapdoelement要将哪个div转换为映射
*@returns{google.maps.Map}
*/
函数makeMainMap（MainMapdElement）{
返回新的google.maps.Map（mainmapdoElement{
缩放：10，
中心：新google.maps.LatLng（40.747688，-74.004142），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
/**
*从我们的div获取lat和long属性
*@param{DOM Element}从中获取lat和long的div
*@返回{Object}
*/
函数getLatLong（doElement）{
返回{
lat:domeElement.getAttribute（“数据lat”），
long:domeElement.getAttribute（“数据长”）
};
}
/**
*让我们的div监听单击以使其附加到map
*@param{DOM Element}domeElement要将侦听器添加到的元素
*@param{google.maps.Map}映射要附加到的映射
*@returns{undefined}
*/
函数addMapClickListener（DomeElement，map）{
addEventListener（“单击”，函数（）{
var-latLong=getLatLong（本）；
addMarker（map，latLong.lat，latLong.long）；
});
}
/**
*我们地图项目的起点
*@returns{undefined}
*/
函数main（）{
变量
//获取要将映射附加到的div
mainMapDiv=document.getElementById（“mainMap”），
//使用“map”类获取所有包含坐标的元素
mapDivs=document.getElementsByCassName（“地图”），
//我们的主要谷歌地图
主地图，
//横向和纵向支架
拉特朗，
//柜台
i=0；
//创建我们的主地图
mainMap=makeMainMap（mainMapDiv）；
//让我们的部门听一听咔嗒声
对于（i=0；iidgetAttribute（[attribute]）lat/longlat/longdivlatlongvar 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]
});
};
<!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>