添加點標注
                編輯時間:2017-02-03

                3.jpg

                標注

                標注表示地圖上的點。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);                     // 將標注添加到地圖中

                定義標注圖標

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

                var map = new BMap.Map("container");   

                var point = new BMap.Point(116.404, 39.915);   

                map.centerAndZoom(point, 15);  // 編寫自定義函數,創建標注  

                function addMarker(point, index){  // 創建圖標對象  

                var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {   

                // 指定定位位置。  

                // 當標注顯示在地圖上時,其所指向的地理位置距離圖標左上   

                // 角各偏移10像素和25像素。您可以看到在本例中該位置即是  

                   // 圖標中央下端的尖角位置。   

                   offset: new BMap.Size(10, 25),   

                   // 設置圖片偏移。  

                   // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時,您  

                   // 需要指定大圖的偏移位置,此做法與css sprites技術類似。   

                   imageOffset: new BMap.Size(0, 0 - index * 25)   // 設置圖片偏移   

                 });     

                // 創建標注對象并添加到地圖  

                 var marker = new BMap.Marker(point, {icon: myIcon});   

                 map.addOverlay(marker);    

                }   

                // 隨機向地圖添加10個標注   

                var bounds = map.getBounds();   

                var lngSpan = bounds.maxX - bounds.minX;   

                var latSpan = bounds.maxY - bounds.minY;   

                for (var i = 0; i < 10; i ++) {   

                 var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),   

                                            bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));   

                 addMarker(point, i);   

                }

                監聽標注事件

                事件方法與Map事件機制相同。可參考事件部分。

                marker.addEventListener("click", function(){   

                 alert("您點擊了標注");   

                });

                可托拽的標注

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

                marker.enableDragging();   

                marker.addEventListener("dragend", function(e){   

                 alert("當前位置:" + e.point.lng + ", " + e.point.lat);   

                })


                標注彈跳動畫

                <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 marker = new BMap.Marker(point)// 創建標注
                    
                map.addOverlay(marker);               // 將標注添加到地圖中
                    
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
                </script>


                設置標注是否可以拖拽

                <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 marker = new BMap.Marker(point);  //
                創建標注
                   
                map.addOverlay(marker);               // 將標注添加到地圖中
                   
                marker.disableDragging();           // 默認不可拖拽
                   
                // marker.enableDragging(); // 設置可拖拽
                </script>


                內存釋放

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

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

                map.removeOverlay(marker);   

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


                微信掃碼添加客服
                400-028-7262
                聯系我們
                主站蜘蛛池模板: 国产美女做a免费视频软件| 成人黄色在线网站| 日本在线免费看片| 亚洲精品一卡2卡3卡三卡四卡| 被民工蹂躏的雯雅婷| 无套内射在线无码播放| 午夜国产精品久久久久| 99久热只有精品视频免费观看17| 日本阿v视频在线观看| 亚洲福利电影一区二区?| 耻辱の女潜入搜查官正在播放| 国产精品久久亚洲一区二区| 久久精品夜色国产亚洲av| 爆乳少妇在办公室在线观看 | 免费人成网站在线播放| 黄色激情视频在线观看| 国内剧果冻传媒在线观看网站| 东北老头嫖妓猛对白精彩| 日韩欧美一区二区三区免费观看| 亚洲欧美国产精品| 男女真实无遮挡xx00动态图120秒 男女肉粗暴进来120秒动态图 | 国产国产成人精品久久| 69pao精品视频在线观看| 日韩在线视频观看| 亚洲短视频在线观看| 精品国产成人亚洲午夜福利| 国产在线精品观看一区| 18禁黄网站禁片免费观看不卡| 天美传媒一区二区三区| 亚洲va欧美va天堂v国产综合| 色屁屁在线观看视频免费| 国产精品久久久久网站| a在线视频免费观看| 我叫王筱惠第1部分阅读| 久久精品女人天堂AV麻| 欧美大杂交18p| 亚洲色图欧美在线| 精品人妻AV区波多野结衣| 国产一区免费视频| 黄色录像大片毛片aa| 国产精品久久久久久久久久免费|