高德地圖新增Marker點標記

阿新 • • 發佈：2019-01-26

示例程式碼部分：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點標記</title>
    <link 
 rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color 
: #0066ff;
        }
    </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div  class 
="button-group">
    <input type="button" class="button" value="新增點標記覆蓋物" id="addMarker"/>
    <input type="button" class="button" value="更新點標記覆蓋物" id="updateMarker"/>
    <input type="button" class="button" value="刪除點標記覆蓋物" id="clearMarker"/>
</div>
<script>
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [104.747402,31.46131],
        zoom: 13
    });
    AMap.event.addDomListener(document.getElementById('addMarker'), 'click', function() {
        addMarker();
    }, false);
    AMap.event.addDomListener(document.getElementById('updateMarker'), 'click', function() {
        marker && updateMarker();
    }, false);
    AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }, false);

    // 例項化點標記
    function addMarker() {
        if (marker) {
            return;
        }
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [104.747402,31.46131]
        });
        marker.setMap(map);
    }

    function updateMarker() {
        // 自定義點標記內容
        var markerContent = document.createElement("div");

        // 點標記中的圖示
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        markerContent.appendChild(markerImg);

        // 點標記中的文字
        var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = "Hi，我換新裝備啦！";
        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新點標記內容
        marker.setPosition([104.747402,31.46131]); //更新點標記位置
    }
</script>
</body>
</html>

程式碼片分析：

核心部分，如何新增一個點？
這裡寫圖片描述

實現基本功能的程式碼：

//這裡是設定地圖中心點，比如這裡選了一個綿陽為中心的座標
 var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [104.747402,31.46131],
        zoom: 13
    });

    window.onload = function(){
        addMarker();
    }
    // 例項化點標記
    function addMarker() {
        if (marker) {
            return;
        }
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [104.747402,31.46131]//在這裡設定需要打點的座標
        });
        marker.setMap(map);
    }

講獲取的店座標拷貝到示例程式碼此處：
這裡寫圖片描述

儲存，執行，地圖上出現Marker點

高德地圖新增Marker點標記

示例程式碼部分： <!doctype html> <html> <head> <meta charset="utf-8"> <

Android 高德地圖新增Marker，Marker點選事件

新增圖片圖示 BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.qidian)); final

高德地圖自定義點標記圖示大小

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

基於高德地圖的描點操作，監聽地圖縮放，展示合理數量的marker

高德地圖開發之點標註marker

在地圖上新增標記點是常使用的方法，用它可以將任何你希望或感興趣的點標註在地圖上，同時也可以指定任意的圖示或內容等。Marker就是這樣一個用於在地圖上新增點標記的類。 1. 要有一個地圖物件例項，如下： var mapObj = new AMap.Map('container',

高德地圖給marker、circle、polyline、polygon新增右鍵選單

高德地圖右鍵選單類ContextMenu，在實際應用中為了互動更方便有時不僅需要地圖的右鍵選單，還需要在marker、circle、polyline、polygon上新增右鍵選單，我採用ContextMenu類實現，以polygon為例，通過響應”rightcl

高德地圖02---高德地圖新增覆蓋物

1 新增MarkOption標記 “` MarkerOptions mark = new MarkerOptions(); LatLng lat=new LatLng(39.908127, 116.375257); mark.position(lat); //mark的座標位置

Android——高德地圖設定中心點和縮放比例，獲取兩點之間距離

/** * 監聽amap地圖載入成功事件回撥 */ @Override public void onMapLoaded() { LatLng marker1 = new LatLng(39.90403, 116.407525);

高德地圖的Marker不需要setMap，建立時預設就可以顯示在地圖上

很驚奇，之前用百度地圖API都是需要在建立Marker物件後，再執行setMap函式，才能顯示到地圖上，高德完全可以省略這一步，程式碼如下： $(document).ready(function(){ // 為防止CSRF（Cross-s

Android高德地圖設定Marker旋轉角度.

1.程式碼 marker.setRotateAngle(360-(float) dir); 2.注意高德地圖設定旋轉角度是以正北為起點,逆時針旋轉的. 是逆時針的...........

iOS 高德地圖設定中心點,獲取中心點的詳細位置和經緯度

先在下面附上逆地理成功之後的圖片下面附上具體的幾步程式碼實現: 1.通過傳入的經緯度進行逆地理編碼，進行逆地理編碼初始化，然後發起逆地理編碼搜尋。(self.search 這個是定義的 AMapSearchAPI 的物件) - (void)setGegeo:(CLL

高德地圖載入海量點

在實現效果的時候主要參考了兩個例子：需求：本來我做的是載入點然後點選彈窗，但是由於數量多載入速度太慢，同事建議我換成海量點參考例子1時，其他的都很好理解，就是資料集格式為：, data: Array 座標資料集. 例：data: [{lnglat: [116.40

高德地圖新增多邊形並刪除

//新增多邊形 LatLng latLng1 = new LatLng(42.742467, 79.842785); LatLng latLng2 = new LatLng(43.893433, 98.124035); LatLng latLng3 = new LatLng

高德地圖新增多邊形Polygon顏色異常的解決

高德地圖的覆蓋物新增API提供了很多種指定覆蓋物的新增和自定義覆蓋物新增的方法。標記、向量圖形元素（包括：折線、多邊形和圓）等。覆蓋物擁有自己的地理座標，當拖動或縮放地圖時，它們也會隨地圖移動。在新增多邊形(Polygon)的時候，我發現並沒有設定Polyg

Android 高德地圖新增線段紋理

共享單車軌跡介面如：小黃車和摩拜單車介面佈局採用的是高德地圖，並且每個軌跡線段都是有對應的地圖紋理首先，我們在高德地圖開發環境下進行地圖線段紋理開發需要明確幾個前提：線段新增紋理根據官方文件是在PolylienOptions 類中進行設定 Polyli

高德地圖新增自定義圖示

1.新增自定義圖示 aMap.addMarker(new MarkerOptions() .draggable(true) .title(jsonObject.getString("functionDetail")

高德地圖自定義點聚合樣式Android

寫了Android高德地圖的點聚合功能不廢話:直接上程式碼 private ClusterOverlay mClusterOverlay; private int clusterRadius = 100; private void dianjuheP

高德地圖實現公交路線-新增標記-軌跡回放-中心點-圖層

效果圖軌跡回放 JSP <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> &l

高德地圖Android版SDK的應用(定位，新增自定義標記點)

需要先下載高德地圖的 Android SDK和 Android 定位SDK : http://code.autonavi.com/index package com.fproject.DXCBuy; import com.amap.api.location.AMap

一頁程式碼實現高德地圖顯示自己定位，以及Marker標記點顯示（文末有福利哦）

import android.Manifest; import android.content.pm.PackageManager; import android.location.Location; import android.os.Bundle; import andr

高德地圖新增Marker點標記

相關推薦