国产女人被狂躁到高潮小说,亚洲日韩一区二区三区,色窝窝无码一区二区三区成人网站 ,丰满岳乱妇在线观看中字无码

400-800-9385
網站建設資訊詳細

在頁面上切換顯示多個動態的高德地圖

發表日期:2023-04-10 10:12:31   作者來源:方維網絡   瀏覽:2298   標簽:網站展示地圖    

在國內的網站的聯系我們的動態地圖中,百度地圖與高德地圖都是比較常用的,都有比較合適的網頁地圖插件,從功能的普遍性講,百度地圖還是比高德地圖好出不少的,但奈何百度地圖只支持中文,沒有英文版,而高德地圖是有英文版的(雖然更新很慢,很多位置更新不及時)所以如果是做中英文版網站的動態地圖時,可以中文版用百度地圖,英文版用谷歌地圖,中英文版都使用同一種地圖的話,可以用高德地圖,下面講一下如何實現在同一個頁面里點擊顯示不同的地圖位置,如下圖所示:
 

地圖展示


 
html代碼如下:
 <div class="progrss">
   <div class="name" data-point1="118.831377" data-point2="31.930893" >南京總部</div>
 <div class="name" data-point1="120.614977" data-point2="31.331292" >蘇州</div>
<div class="name" data-point1="113.859061" data-point2="22.571552" >深圳</div>
</div>
   <div class="map map-active"  id="container2" style="width:100%;  height: 500px;">
             <!--此處顯示地圖的內容-->
    </div>
JS代碼如下:
     <script type="text/javascript">
            function get_map(point1,point2){
            //初始化地圖對象,加載地圖
            var map = new AMap.Map("container2", {resizeEnable: true,  zoom:11,lang:'cn'});
          //其中參數point1為地圖的經度,point2為地圖的緯度  
Var lnglats = [
                [point1,point2]
            ];
            var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
//確定地圖的位置,并將在地圖增加標注點
            for (var i = 0, marker; i < lnglats.length; i++) {
                var marker = new AMap.Marker({
                    position: lnglats[i],
                    map: map
                });
               
            }
            map.setFitView();//顯示不同的經度和緯度的地圖
          }
</script>
JS切換效果如下:
<script>
    // 地圖切換效果
    $(" .progrss .name").on("click", function () {
      let index = $(this).index();
      $(this).addClass("name-active").siblings().removeClass("name-active") $(" .contact-list .link-detail").eq(index).addClass("detail-active").siblings().removeClass("detail-active")
      var point1 = $(this).attr('data-point1') ;//獲得要所在地點的經度
      var point2 = $(this).attr('data-point2') ;//獲得要所在地點的緯度
      get_map(point1,point2); //調用地圖顯示方式,顯示切換后的地圖位置
      }).eq(0).click();//默認顯示第一個地點的位置
  </script>
 
要求引入jquery.js和高德地圖的JS文件和CSS文件,如下圖:
 

引入JS

可通過高德地圖API頁面獲取地圖上的經緯度,如下圖所示:
 

地圖代碼


其中lng為經度, lat為緯度,這樣就能實現地圖的標注點。
最后說一下,從準確性和運用廣泛性來講。中文網站用百度地圖,英文網站用谷歌地圖是最好的選擇,但谷歌地圖在國內無法訪問(需要梯子),所以折中的方法就是中英站使用同一個地圖時,可以使用高德地圖顯示。如果英文網站不向國內用戶瀏覽,則可以使用谷歌地圖,這都要取決客戶的選擇了。
 
 
如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.sdlwjx666.com/news/6734.html