日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

百度地图添加 标示——默认、自定义(小狐狸)标示

發布時間:2024/1/4 综合教程 37 生活家
生活随笔 收集整理的這篇文章主要介紹了 百度地图添加 标示——默认、自定义(小狐狸)标示 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、簡介

  所有疊加或覆蓋到地圖的內容,我們統稱為地圖覆蓋物。如標注、矢量圖形元素(包括:折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標,當您拖動或縮放地圖時,它們會相應的移動。

地圖API提供了如下幾種覆蓋物:

Marker:標注表示地圖上的點,可自定義標注的圖標。

Label:表示地圖上的文本標注,您可以自定義標注的文本內容。

  可以使用map.addOverlay方法向地圖添加覆蓋物,使用map.removeOverlay方法移除覆蓋物,注意此方法不適用于InfoWindow。

二、添加簡單標注

  標注表示地圖上的點。API提供了默認圖標樣式,您也可以通過Icon類來指定自定義圖標。Marker的構造函數的參數為Point和 MarkerOptions(可選)。注意:當您使用自定義圖標時,標注的地理坐標點將位于標注所用圖標的中心位置,您可通過Icon的offset屬性 修改標定位置。

下面的示例向地圖中心點添加了一個標注,并使用默認的標注樣式。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 創建標注    
map.addOverlay(marker);                     // 將標注添加到地圖中

  可以通過設置標注是跳動

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫

三、自定義標注圖標

  通過Icon類可實現自定義標注的圖標,下面示例通過參數MarkerOptions的icon屬性進行設置,您也可以使用marker.setIcon()方法。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
    <title>設置點的新圖標</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    
    //創建小狐貍
    var pt = new BMap.Point(116.417, 39.909);
    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));  //定義自己的標注
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 創建標注
    map.addOverlay(marker2);              // 將標注添加到地圖中
</script>

    

四、可托拽的標注

  marker的enableDragging和disableDragging方法可用來開啟和關閉標注的拖拽功能。默認情況下標注不支持拖拽,您需要調 用marker.enableDragging()方法來開啟拖拽功能。在標注開啟拖拽功能后,您可以監聽標注的dragend事件來捕獲拖拽后標注的最 新位置。

marker.enableDragging(); //設置其可拖拽   
marker.addEventListener("dragend", function(e){    
 alert("當前位置:" + e.point.lng + ", " + e.point.lat);    
})

五、內存釋放

在API 1.0版本中,如果您需要在地圖中反復添加大量的標注,這可能會占用較多的內存資源。如果您的標注在移除后不再使用,可調用 Overlay.dispose()方法來釋放內存。注意在1.0版本中,調用此方法后標注將不能再次添加到地圖上。自1.1版本開始,您不在需要使用此 方法來釋放內存資源,API會自動幫助您完成此工作。

例如,您可以在標注被移除后調用此方法:

map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不需要這樣調用

ps:最基礎知識可看:http://www.cnblogs.com/0201zcr/p/4679444.html ,感謝您的耐心閱讀!

總結

以上是生活随笔為你收集整理的百度地图添加 标示——默认、自定义(小狐狸)标示的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。