gmap3 地图（一）

最新推荐文章于 2019-07-22 19:37:30 发布

chen8703

最新推荐文章于 2019-07-22 19:37:30 发布

阅读量898

点赞数

分类专栏： JS/JQUERY 文章标签：地图 jquery插件 google地图 streetview

本文链接：https://blog.csdn.net/chen8703/article/details/26219547

版权

JS/JQUERY 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一种基于GOOGLE地图的管理JQUERY插件

官方网址：http://gmap3.net/en/

API:http://gmap3.net/en/catalog/9-map/map-32

引用JS:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="JS/gmap3/jquery.js" type="text/javascript"></script>
<script src="JS/gmap3/gmap3.js" type="text/javascript"></script>

样式：

 <style>
      #container{
        position:relative;
        height:700px;
      }
      #googleMap{
        border: 1px dashed #C0C0C0;
        width: 60%;
        height: 700px;
      }
      
      /* cluster */
      .cluster{
      	color: #FFFFFF;
      	text-align:center;
      	font-family: Verdana;
      	font-size:14px;
      	font-weight:bold;
      	text-shadow: 0 0 2px #000;
        -moz-text-shadow: 0 0 2px #000;
        -webkit-text-shadow: 0 0 2px #000;
      }
      .cluster-1{
        background: url(images/map/m1.png) no-repeat;
        line-height:50px;
      	width: 50px;
      	height: 40px;
      }
      .cluster-2{
        background: url(images/map/m2.png) no-repeat;
        line-height:53px;
      	width: 60px;
      	height: 48px;
      }
      .cluster-3{
        background: url(images/map/m3.png) no-repeat;
        line-height:66px;
      	width: 70px;
      	height: 56px;
      }
      
      /* infobulle */
      .infobulle{
        overflow: hidden; 
        cursor: default; 
        clear: both; 
        position: relative; 
        height: 34px; 
        padding: 0; 
        background-color: rgb(57, 57, 57);
        border-radius: 4px 4px; 
        -moz-border-radius: 4px 4px;
        -webkit-border-radius: 4px 4px;
        border: 1px solid #2C2C2C;
      }
      .infobulle .bg{
        font-size:1px;
        height:16px;
        border:0px;
        width:100%;
        padding: 0px;
        margin:0px;
        background-color: #5E5E5E;
      }
      .infobulle .text{
        color:#FFFFFF;
        font-family: Verdana;
        font-size:11px;
        font-weight:bold;
        line-height:25px;
        padding:4px 20px;
        text-shadow:0 -1px 0 #000000;
        white-space: nowrap;
        margin-top: -17px;
      }
      .infobulle.drive .text{
        background: url(images/drive.png) no-repeat 2px center;
        padding:4px 20px 4px 36px;
      }
      .arrow{
        position: absolute; 
        left: 45px; 
        height: 0; 
        width: 0; 
        margin-left: 0; 
        border-width: 10px 10px 0 0; 
        border-color: #2C2C2C transparent transparent; 
        border-style: solid;
      }

      .bgcolor{ background-color:Red;}
    </style>

HTML：

<asp:HiddenField ID="hdnresult" runat="server"  Value=""/>
<input type="button" id="btnmylocation" value="我的位置" />
<input type="button" id="btnAddLocation" value="添加位置" />
<input type="button" id="btnHideStreetView" value="隐藏全景"/>
<div style=" float:left;">
<ul id="leftdata">

</ul>
</div>
<div id="googleMap" style=" float:left;"></div>
<div id="streetview" style="float:right; width:400px; height:400px;"></div>

示意图：