百度地圖JavaScript API 學習之自定義標註圖示（二）

阿新 • • 發佈：2019-02-10

地圖繪製之新增自定義標註圖示（二）

官方提供了兩種方法來自定義標註圖示：

通過引數MarkerOptions的icon屬性進行設定
使用Marker.setIcon()方法。

第二種方法

即使用Marker.setIcon()方法來建立自定義標註圖示。

（1）先使用Marker類的建構函式Marker(point: Point, opts: MarkerOptions)建立一個影象標註例項。

//建立了一個標註點（這裡用到了第二個引數MarkerOptions，可通過物件字面量形式表示。）
var marker = new BMap.Marker(point,{title:"標註提示語句" 
});//opts引數第一種方法用過了，這裡忽略就行了。

這裡寫圖片描述

/*Icon類的建構函式的使用方法：
* Icon(url: String, size: Size, opts: IconOptions)
* 建構函式Icon()中有3個引數：String型別的圖片地址url；Size型別的圖片大小；和可選引數IconOptions。
* 第二個引數是Size型別的，基礎類Size以畫素表示一個矩形區域的大小。
* 注：可選引數IconOptions可以根據自己需要來決定要不要。（為了簡單起見，我們這裡先不用）
*/
var myIcon = new BMap.Icon('node_position.png' 
,new BMap.Size(30,30));

具體用法看圖：（看不懂的可以參考程式碼中的註釋）

這裡寫圖片描述

Icon類的方法根據自己需要呼叫就行了，本案例沒有涉及到它的使用。
這裡寫圖片描述

程式碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title定義標註圖示方法1</title 
>
    <style>
        html,body,#allmap{
            height: 100%;
            width: 100%;
            overflow:hidden;
            margin:0;
            font-family: "微軟雅黑";
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
    <div id="allmap"></div>
    <script>
        /*實現方法：
        （1）通過引數MarkerOptions的icon屬性進行設定；
        （2）使用Marker.setIcon()方法
        */

        var map = new BMap.Map("allmap");//建立一個地圖
        var point = new BMap.Point(116.404, 39.915);//建立一個地理點座標
        map.centerAndZoom(point,12);

        //建構函式：IconMarker(point: Point, opts: MarkerOptions)    建立一個影象標註例項。
        //MarkerOptions類表示Marker建構函式的可選引數。它沒有建構函式，但可通過物件字面量形式表示。

        var mk = new BMap.Marker(point,{title:"標註提示語句"});//建立標註

        /*Icon類表示標註覆蓋物所使用的圖示。
        *建構函式：Icon(url: String, size: Size, opts: IconOptions)  以給定的影象地址和大小建立圖示物件例項
        *屬性：
        *anchor:Size 圖示的定位點相對於圖示左上角的偏移值。【此功能相當於定位中的left和top屬性】
        *size:Size   圖示可視區域的大小。(圖示是作為span標籤的背景圖片新增上去的，開啟控制檯自行檢視)
        *imageSize:Size   圖示所用的圖片的大小。此功能的作用等同於CSS中的background-size屬性。
        *imageOffset:Size 圖示所用的圖片相對於可視區域的偏移值。【此做法與css sprites技術類似。】
        *                 此功能，相當於CSS中的background-position屬性。
        *imageUrl:String 圖示所用影象資源的位置。
        */

        /*IconOptions表示Icon建構函式的可選引數。它沒有建構函式，但可通過物件字面量形式表示。
        *anchor:Size 圖示的定位錨點。是相對於圖示左上角的偏移值。預設等於圖示寬度和高度的中間值。【指定標註的位置】
        *imageOffset:Size 圖片相對於可視區域的偏移值。【當您需要從一幅較大的圖片中擷取某部分作為標註圖示時使用】
        */

        /*Size類以畫素表示一個矩形區域的大小。
        *建構函式：Size(width: Number, height: Number)   以指定的寬度和高度建立一個矩形區域大小物件   
         */

        // var icon = new BMap.Icon('location.ico',new BMap.Size(32,32));
        //var icon = new BMap.Icon('location.png',new BMap.Size(20,27));
        /*設定的是span元素的大小，即圖片區域的大小，並非圖片本身的大小*/

        //icon.imageSize = new BMap.Size(20,27);//設定span元素背景圖片的真實大小，即圖片本身的大小
        //icon.anchor = new BMap.Size(10,20);//設定span元素的偏移，即整個圖片區域的偏移量，相當於設定left，top屬性

        /*圖片路徑自己指定*/
        var icon = new BMap.Icon('node_position.png',new BMap.Size(30,30));
        icon.imageSize = new BMap.Size(30,30);
        icon.anchor = new BMap.Size(15,25);
        mk.setIcon(icon); 
        map.addOverlay(mk);//將標註新增到地圖中

    </script>
</body>
</html>

效果圖

未設定該屬性時：icon.anchor = new BMap.Size(15,25);

這裡寫圖片描述

設定該屬性後：icon.anchor = new BMap.Size(15,25);
這裡寫圖片描述

設定該屬性時：icon.anchor = new BMap.Size(0,0);

這裡寫圖片描述

設定該屬性時：icon.imageSize = new BMap.Size(20,20);(此時，改變了圖片的真實大小)

這裡寫圖片描述

百度地圖JavaScript API 學習之自定義標註圖示（二）

地圖繪製之新增自定義標註圖示（二）官方提供了兩種方法來自定義標註圖示：通過引數MarkerOptions的icon屬性進行設定使用Marker.setIcon()方法。第二

按鈕配置之自定義按鈕使用（二）——JEPLUS軟件快速開發平臺

bottom vpd 開發平臺 rem 按鈕 ros cto -c spa JEPLUS按鈕配置之自定義按鈕使用（二）之前的一篇筆記講的是在列表上添加自定義按鈕來完成自己的業務需求，今天這篇筆記就主要講一下如何在表

百度地圖 Javascript API 遍歷搜尋結果

API文件：http://developer.baidu.com/map/jshome.htm 但說明不夠詳細，這裡給出一個遍歷搜尋結果的完整例項。 <html> <head> <meta http-equiv="Content-Typ

百度兩點座標間距離(百度地圖JavaScript API和百度web服務API)

一、介紹本文介紹了百度API計算2點間距離及程式碼例項百度地圖JavaScript API 百度web服務API 二、使用百度地圖JavaScript API 百度API官網地址：http://lbsyun.baidu.com/index.php?title=

微信座標轉換百度座標(百度地圖JavaScript API和百度web服務API)

一、介紹本文介紹了微信座標轉換成百度座標的2種方式及程式碼例項百度地圖JavaScript API 百度web服務API 二、注意百度地圖JavaScript API：只可以轉換成百度座標。百度座標轉換中文地址百度web服務API：轉換成百

使用百度地圖JavaScript API遇到的暗坑

一、介紹專案中使用了微信定位，由於使用了百度地圖JavaScript API來把微信座標轉換成百度座標，在使用百度座標轉換成百度中文地址，遇到一些鬱悶的坑，在這裡面介紹一下。二、說明百度API官網地址：http://lbsyun.baidu.com/index.php?titl

百度座標轉換中文地址(百度地圖JavaScript API逆地址解析 )

使用“百度地圖JavaScript API”把微信座標轉成中文地址百度API官網地址：http://lbsyun.baidu.com/index.php?title=jspopular 步驟1：頁面引用js <script type="text/javascript" src

百度地圖 JavaScript API

拖拽 ont path request func http java word fun 最近有點懶項目結尾了完了好長時間沒有去總結項目中的問題想了下還是寫寫吧這是一個關於百度地圖的網頁展示 <!DOCTYPE html><html>&

百度地圖JavaScript API獲取使用者當前經緯度並獲取使用者當前詳細地理位置

前言：　　前端時間剛好使用了百度地圖的js api定位獲取使用者當前經緯度並獲取當前詳細位置的功能，為了方便下次找起來方便一些自己在這裡記錄一下，希望也能夠幫助到有需要的童鞋們！解決方案：一、引入JavaScript API v2.0 SDK <script type="text/ja

百度地圖精準定位，自定義marker，自定義資訊彈出視窗。

先說下業務場景，在資料庫查出相應的專案展示出來，然後點選專案在百度地圖上標註專案的地址，同時彈出視窗顯示相關的資訊。下面就來看看具體的實現： 1.引入百度地圖相關的API，我這裡選的是web的JavaScript API。後端的

Android 百度地圖定位半徑圈範圍自定義

專案需求百度定位的半徑為500米，但是載入下來後的定位半徑為100米（預設大小）。查詢了好久資料才發現，原來這個所謂的半徑圈表示百度地圖的半徑誤差值大小。在百度地圖的API中，BDLocationListener，定位的返回監聽事件中設定即可。 locData.dire

android 百度地圖SDK 獲取手機附近POI興趣點列表（過時）

文章內容已經過時~大家去百度官方api學習。 http://developer.baidu.com/map/ http://lbsyun.baidu.com/sdk/download 功能描述：獲取手機自身附近的興趣點(Poi, 之後使用Poi表示興趣點)列表，顯示

JavaWeb學習心得之自定義簡單標籤（一）

一、簡單標籤簡介含義：實現SimpleTag介面的標籤稱為簡單標籤。方法： setJspContext：用於把JSP頁面的pageContext物件傳遞給標籤處理器物件setParent：用於把

按鈕配置之自定義按鈕使用（一）——JEPLUS軟件快速開發平臺

事件 proc oss In 需求信息 ces otto 圖片 JEPLUS按鈕配置之自定義按鈕使用（一）系統開發過程中無論是表單的默認按鈕或是列表的默認按鈕以及Action的默認按鈕有時候並不能滿足我們的業務需求，這個時

Hadoop生態圈-Flume的組件之自定義攔截器（interceptor）

events nbsp sin capacity figure IV mem nap code 　　　　　　　　　　　　　　　　Hadoop生態圈-Flume的組件之自定義攔截器（interceptor）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

spring原始碼學習之路---IOC實現原理（二）

上一章我們已經初步認識了BeanFactory和BeanDefinition，一個是IOC的核心工廠介面，一個是IOC的bean定義介面，上章提到說我們無法讓BeanFactory持有一個Map package org.springframework.beans.factory.supp

pandas縱向學習之10 minutes to pandas（二）

pandas縱向學習之10 minutes to pandas（一）布林值索引 df[df.A>0] A B C D 2013-01-02 0.356680 -0.468280 1.293093 -0.752251 2013-01-03 1.179930

Linux學習之多執行緒程式設計（二）

言之者無罪，聞之者足以戒。 ——《詩序》（二）、執行緒的基本控制 1、終止程序：如果程序中的任意一個程序呼叫了exit、_exit、_Exit，那麼整個程序就會終止普通的單個程序有以下3種退出方式，這樣不會終止程序：（1）從啟動例程中返回，返回值是執行緒的退

Python學習之==>面向物件程式設計（二）

一、類的特殊成員我們在 Python學習之==>面向物件程式設計（一）中已經介紹過了構造方法和析構方法，構造方法是在例項化時自動執行的方法，而析構方法是在例項被銷燬的時候被執行，Python類成員中還存在著一些具有特殊意義的方法，下面我們來一一介紹一下： 1、__doc__ 表示類的描述資訊

Python網路程式設計 ---Socket模組學習之獲取遠端裝置IP（二）

1、使用內建庫函式gethostbyname()，引數為遠端裝置的主機名。新建檔案 getremotemachineinfo.py#!/usr/bin/python import socket def get_remote_machine_info(): remote

百度地圖JavaScript API 學習之自定義標註圖示（二）

地圖繪製之新增自定義標註圖示（二）

第二種方法

程式碼示例：

效果圖

相關推薦