温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
  • 首页 > 
  • 教程 > 
  • 开发技术 > 
  • web开发 > 
  • google V3实例化地图,标点,画线(卫星模式地址不匹配是因为引入google的js时少了®ion=cn)

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

发布时间:2020-07-19 21:27:52 来源:网络 阅读:1385 作者:北方的狼族 栏目:web开发

<!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&region=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" >  

   </div>  

   </form>  

</body>  

</html>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI