您的位置:首页 > Web前端 > JavaScript

google V3实例化地图,标点,画线(卫星模式地址不匹配是因为引入google的js时少了®ion=cn)

2014-03-11 19:24 288 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<%– 加载 Google 地图 API JavaScript–%>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=cn"></script>
<script type="text/javascript">
var map;
//地图初始化
function initialize() {
var myLatlng = new google.maps.LatLng(41.075145,111.470077)
var mapOptions = {
zoom: 14, //缩放级别
center: myLatlng, //将地图的中心设置为指定的地理点 可以使用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到独立建筑物)之间的缩放级别
mapTypeId: google.maps.MapTypeId.SATELLITE, //ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图
scaleControl: true, //比例尺
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);//编写 JavaScript 函数创建“map”对象
var contentString = 'Hello World';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
//icon:你的图片的地址(此行不设置则使用默认图片)
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

//..................................................................
polyline = new google.maps.Polyline({
path:
[new google.maps.LatLng(41.075145,111.470077),
new google.maps.LatLng(41.085145,111.480077)],
geodesic: true,
strokeColor: "#FFFF00",
strokeOpacity: 1,
strokeWeight: 4
//fillOpacity:0.5
});
polyline.setMap(map);

}
</script>
</head>
<body
<form id="form1" runat="server">
<%–创建名为“map_canvas”的 div 元素来包含地图–%>
<div id="map_canvas" style="width: 800px; height: 600px">
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息