GoogleMaps api for javascript demo 动态按顺序加载marker
GoogleMaps api for javascript demo 动态按顺序加载marker
阿新
发布于 2018-04-12 14:45:41
发布于 2018-04-12 14:45:41
@{
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>我的站点标题</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 90% }
</style>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(31.38491295646036, 120.98114993423223);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function (event) {
addmarker(map, event.latLng);
});
}
function addmarker(map, position) {
var marker = new google.maps.Marker({
position: position,
map: map,
draggable: true,
title: "" + position
});
var message = new google.maps.InfoWindow({
content: "position:" + marker.position + ";"
});
google.maps.event.addListener(marker, 'click', function () {
//if (message) message.close();
//message.open(map, marker);
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: "position:" + marker.position + ";"
});
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function () {
//alert('position' + marker.position);
$('#result').append(marker.position);
});
google.maps.event.addListener(marker, 'dblclick', function () {
//alert('position' + marker.position);
marker.setMap(null);
});
google.maps.event.addListener(marker, 'dragstart', function () {
if (typeof infowindow != 'undefined') infowindow.close();
});
}
</script>
</head>
<body onload="initialize()">
<div id="result"></div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>function initialize() {
var centerMap = new google.maps.LatLng(31.373965502830007, 120.95897912979126);
var myOptions = {
zoom: 14,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
setMarkers(map, sites);
});
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
function setMarkers(map, markers) {
// TESTING ONLY, remove later
//markers.splice(0, 200 - howMany);
//markers.sort(latitudeSort);
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[2], sites[3]);
(function (i, siteLatLng, sites) {
setTimeout(function () {
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[1],
animation: google.maps.Animation.DROP
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}, i * 100, 100);
} (i, siteLatLng, sites));
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-01-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读