您的位置:婷婷的个人主页>>日志>>google map v3 多点标注范例_带链接

文章中心
装修推荐

google map v3 多点标注范例_带链接

作者:admin 来源:本站原创 发布时间:2012-07-10 点击数: 转播到腾讯微博

和大家分享下在做google map v3 开发, 从数据库获取到的经度和纬度,如何根据经度和纬度在地图上做个标记。

 
<!DOCTYPE HTML>
<html>
<head>
 <title>google map  v3  多点标注范例_带链接</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8" />
    <link href="http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
        <style> body{ font-size:12px;}</style>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <link href="/Template/xuefu/style/global.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">
      //定位
      function initialize() {
        var myOptions = {
          zoom: 12,
          center: new google.maps.LatLng(28.693599,115.85701),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };       
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
   
 
 
  //machao 添加标记
        var myLatLng1= new google.maps.LatLng(28.662528,115.914506);   
        var marker = new google.maps.Marker({
            position:myLatLng1,map:map,title:"逐浪软件科技有限公司"
        });
       
        var zoomLevel;
  
        //显示图片
 var showImg1 = "<span>名称:<a href='http://www.zoomla.cn' target='_blank'>逐浪软件科技有限公司</a><br/>电话:0791-86161900  86161700<br/>地址:南昌市站前路96号天集大厦14F</span>";
        var infowindow1= new google.maps.InfoWindow({
            content:showImg1,
            size:new google.maps.Size(50,50),
            position:myLatLng1
        });
       infowindow1.open(map);
    google.maps.event.addListener(marker,'click',function(){
            infowindow1.open(map);
        }); 
 
 
  //machao 添加标记
        var myLatLng2= new google.maps.LatLng(28.662264,115.910279);   
        var marker = new google.maps.Marker({
            position:myLatLng2,map:map,title:"华夏互联"
        });
       
        var zoomLevel;
  
        //显示图片
 var showImg2 = "<span>名称:<a href='http://hx008.com' target='_blank'>华夏互联</a><br/>电话:0791-86161900  86161700";
        var infowindow2= new google.maps.InfoWindow({
            content:showImg2,
            size:new google.maps.Size(50,50),
            position:myLatLng2
        });
       infowindow2.open(map);
    google.maps.event.addListener(marker,'click',function(){
            infowindow2.open(map);
        }); 
 
 
  //machao 添加标记
        var myLatLng3= new google.maps.LatLng(28.624008,115.926018);   
        var marker = new google.maps.Marker({
            position:myLatLng3,map:map,title:"青云谱区"
        });
       
        var zoomLevel;
  
        //显示图片
 var showImg3 = "<span>学校名称:<a href='http://54ting.com' target='_blank'>青云谱区</a><br/>电话:0791-86161900  86161700<br/>地址:天虹和百货</span>";
        var infowindow3= new google.maps.InfoWindow({
            content:showImg3,
            size:new google.maps.Size(50,50),
            position:myLatLng3
        });
       infowindow3.open(map);
    google.maps.event.addListener(marker,'click',function(){
            infowindow3.open(map);
        }); 
 
 
  //machao 添加标记
        var myLatLng4= new google.maps.LatLng(28.717087,115.731354);   
        var marker = new google.maps.Marker({
            position:myLatLng4,map:map,title:"湾里区"
        });
       
        var zoomLevel;
  
        //显示图片
 var showImg4 = "<span>名称:<a href='http://www.54ting.com' target='_blank'>湾里区</a><br/>电话:0791-86161900  86161700<br/>地址:江西省南昌市</span>";
        var infowindow4= new google.maps.InfoWindow({
            content:showImg4,
            size:new google.maps.Size(50,50),
            position:myLatLng4
        });
       infowindow4.open(map);
    google.maps.event.addListener(marker,'click',function(){
            infowindow4.open(map);
        }); 
 
   }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body> <!-- head end -->
 <!-- nav end -->
     <div id="map_canvas"></div>
 </body>
</html>
 

责任编辑:本站编辑 发表评论>>
相关文章