高德地圖新增多個點標註的點選事件

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

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
body,html,#container{
            height 
: 100%;
margin: 0px;
}
    </style>
    <title>快速入門</title>
    <style>
@-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0deg);
}
            to {
                -webkit-transform: rotate(360deg);
}
        }
        @-moz-keyframes rotate {
            from  
{
                -moz-transform: rotate(0deg);
}
            to {
                -moz-transform: rotate(359deg);
}
        }
        @-o-keyframes rotate {
            from {
                -o-transform: rotate(0deg);
}
            to {
                -o-transform: rotate(359deg);
}
        }
        @keyframes  
rotate {
            from {
                transform: rotate(0deg);
}
            to {
                transform: rotate(359deg);
}
        }
        @-webkit-keyframes rotate2 {
            from {
                -webkit-transform: rotate(0deg);
}
            to {
                -webkit-transform: rotate(360deg);
}
        }
        @-moz-keyframes rotate2 {
            from {
                -moz-transform: rotate(0deg);
}
            to {
                -moz-transform: rotate(359deg);
}
        }
        @-o-keyframes rotate2 {
            from {
                -o-transform: rotate(0deg);
}
            to {
                -o-transform: rotate(359deg);
}
        }
        @keyframes rotate2 {
            from {
                transform: rotate(0deg);
}
            to {
                transform: rotate(359deg);
}
        }
        .windmill2 {
            display: inline-block;
position: relative;
width: 100px;
height: 50px;
box-sizing: content-box;
position: absolute;
}
        .windmill2 .pillar {
            position: absolute;
top: 8px;
left: 47px;
display: block;
height: 0;
width: 4px;
border-width: 0 2px 25px 2px;
border-style: none solid solid;
box-sizing: content-box;
}
        .windmill2 .axis {
            position: absolute;
top: 0px;
left: 46px;
width: 4px;
height: 4px;
border-width: 3px;
border-style: solid solid solid;
/*background: #000 !important;*/
border-radius: 5px;
z-index: 88;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate 2s linear infinite;
-o-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
box-sizing: content-box;
}
        .windmill2 .swing {
            position: absolute;
top: 1px;
left: -2px;
display: block;
height: 0;
width: 2px;
border-width: 20px 2px 0px 2px;
border-style: solid solid none;
/*border-color: #000 transparent transparent ;*/
            /*box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);*/
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(60deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(60deg);
-ms-transform-origin: 0px 0px;
-ms-transform: rotate(60deg);
-o-transform-origin: 0px 0px;
-o-transform: rotate(60deg);
transform-origin: 0px 0px;
transform: rotate(60deg);
box-sizing: content-box;
}
        .windmill2 .swing2 {
            position: absolute;
top: 0px;
left: 4.5px;
display: block;
height: 0;
width: 2px;
border-width: 20px 2px 0px 2px;
border-style: solid solid none;
/*border-color: #000 transparent transparent ;*/
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(180deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(180deg);
-ms-transform-origin: 0px 0px;
-ms-transform: rotate(180deg);
-o-transform-origin: 0px 0px;
-o-transform: rotate(180deg);
transform-origin: 0px 0px;
transform: rotate(180deg);
box-sizing: content-box;
}
        .windmill2 .swing3 {
            position: absolute;
top: 6px;
left: 3px;
display: block;
height: 0;
width: 2px;
border-width: 20px 2px 0px 2px;
border-style: solid solid none;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(300deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(300deg);
-ms-transform-origin: 0px 0px;
-ms-transform: rotate(300deg);
-o-transform-origin: 0px 0px;
-o-transform: rotate(300deg);
transform-origin: 0px 0px;
transform: rotate(300deg);
box-sizing: content-box;
}
        .windmill2 .text {
            position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
        .windmill2_green{
             border-color:green transparent transparent;
}
        .windmill2_greenPiller{
            border-color:transparent transparent green ;
}
        .windmill2_backgreen{
            background:green !important;
}
        .windmill2_red{
            border-color:red transparent transparent;
}
        .windmill2_redPiller{
            border-color:transparent transparent red ;
}
        .windmill2_backred{
            background:red !important;
}
        .windmill2_gray{
            border-color:gray transparent transparent;
}
        .windmill2_grayPiller{
            border-color:transparent transparent gray ;
}
        .windmill2_backgray{
            background:gray !important;
}
        .amap-marker-content{
            width:100px;
height:100px;
}
    </style>
</head>
<body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=594b6477c45ab2dd32ae8685deb971f7"></script>
<div id="container"></div>
<script>
function windmap(provinces){
        var  map = new AMap.Map("container", {
            resizeEnable: true,
center: [116.40, 39.91],
zoom: 13
});
var marker = [];
for(var i = 0; i < provinces.length; i += 1){
            var markerContent= '<span style="left:20%;top:80%;"  class="windmill2 windmill2-green">' +
                '<span class="pillar windmill2_grayPiller"></span>' +
                '<span class="axis windmill2_gray windmill2_backgray">' +
                '<span class="swing windmill2_gray"></span>' +
                '<span class="swing2 windmill2_gray"></span>' +
                '<span class="swing3 windmill2_gray"></span>' +
                '</span>'+
                '<span class="text">'+provinces[i].name+'</span>'+
                '</span>';
marker = new AMap.Marker({
                content: markerContent,
/*position: provinces[i].center.split(','),*/
title: provinces[i].name,
offset: new AMap.Pixel((i*100),0),
clickable:true,
map: map

            });
//點標註的點選事件
marker.on('click', function(e){
                alert(1);
});
}
    }
    window.onload = function(){
        var marker= [{"center":"-100,200","name":"1"},{"center":"0,200","name":"2"}];
windmap(marker);
}

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

高德地圖新增多個點標註的點選事件

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

iOS Swift百度地圖新增多個標註

搞了一天終於把新增多個標註做出來了，又深刻的反應了寫程式碼一味的copy，不知其所以然的後果太嚴重，一點錯誤找個大半天，好了，不過多bb，說說新增多個標註要注意的一些東西吧。首先，新增大頭針的方法要實現在_mapview.delegate = self 之後，否則過早添加

高德地圖-刪除多個點標記

amp 標記 attr ber class lse head zoom 1.0 1、問題背景高德地圖上有自己創建的marker，單擊刪除按鈕，可以刪除多個標記 2、實現源碼 <!DOCTYPE html> <html> <h

高德地圖-刪除多個指定點標記

i++ detail 1.0 api 我們 value blog func ntb 1、問題背景高德地圖上標記多個標記，點擊刪除按鈕，可以刪除指定的幾個點標記 2、實現源碼 <!DOCTYPE html> <html> <h

高德地圖獲取當前屏幕中心點的經緯度

java sso tar () 附近初始 chan map對象 protected 公司有個需求就是要隨著屏幕的改變而載入附近的商戶信息. 那麽高德地圖獲取當前屏幕中心點的經緯度呢? 核心方法:aMap.setOnCameraChangeLis

reactjs中使用高德地圖計算兩個經緯度之間的距離

第一步下載依賴 npm install --save react-amap 第二步,在元件中使用 import React, { Component } from 'react' import { Link } from 'react-router-dom' import { Map

【Android】高德地圖根據2個座標智慧縮放地圖

需求：在地圖上給定2個座標點，然後將2個座標點通過縮放都能顯示出來。實現：通過查閱高德地圖接入文件和API能找到縮放的API高德地圖文件，看到以下說明限制地圖的顯示範圍從地圖 SDK V4.1.0 起新增了設定地圖顯示範圍的方法，手機螢幕僅顯示設定的地圖

高德地圖顯示多個多邊形框

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=""你的key"></script> <script src

高德地圖-展示多個信息窗口

title meta init http 信息 ext comm pixel https 1、問題背景高德地圖，設置小圖標，並點擊圖標顯示信息 2、實現源碼 <!doctype html> <html> <head>

android-------高德地圖兩點路線和多個點路線繪制

分享圖片下載 style ble use AD tps out font 最近朋友需要兩點路線和多個點路線繪制這個功能，幫忙弄了一下，寫這篇博客與大家分享一下。兩點路線是起點和終點兩個經緯度點，高德繪制出路線，可以實現實線和虛線功能效果圖：相關屬

高德地圖開發之點標註marker

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

高德地圖 infoWindow 預設關閉多個資訊窗體點選彈出

地圖載入完成不想把info窗體顯示，所以找了很多都沒有。最後測試之後這樣改：官網API的程式碼如下：結果如下：預設不開啟，把 marker.emit('click', {target: marker});刪掉就行。

高德地圖Web端JavaScript API開發(二)---在地圖上繪製(點標註)

使用高德地圖在很多時候需要在地圖上標記位置，並且很多時候需要用到自定義的圖示去完成這種位置的標記。當然，這些功能高德地圖都為我們準備了，比如常用的地圖覆蓋物Marker和資訊窗體等。這裡就先說一下點標記的Marker。 Marker是一個用來往地圖上新增點標記的類。使用

高德地圖調用和添加標註

高德 lang 這樣的 top 工具欄展示 nbsp 自己 java 看過高德地圖API的同學都知道，高德地圖不同端調用是不一樣的，作為一個前端菜鳥，前一陣分別在pc端和移動端分別調用了高德地圖。情況是這個樣子的，PC端呢我們可以用高德API的web端的javascrip

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

高德地圖點聚合改進

目錄最後的圈圈上顯示資訊完整程式碼最終效果專案要求需要用到點聚合https://lbs.amap.com/api/javascript-api/e

jsplumb外掛學習--單個節點動態新增多個錨點

思路：其實所謂的動態新增多個描點，就是迴圈新增單個端點，但是指定描點不同的位置核心程式碼： /* target 動態新增多個錨點，並且保證其能夠均勻分配，不會出現連線錯位的

jsplumb外掛學習--單個節點新增多個錨點

思路：其實所謂的新增多個描點，就是新增相同的端點，但是指定描點不同的位置核心程式碼： /*新增多個錨點*/ let endpoint6_1 = jsPlumb.addEndpoint

Android 圖片選擇框架點選放大(可新增多個item,可刪除)

一.這個功能相信每個小夥伴都會遇到，話不多說，直接上效果圖（花屏是錄屏軟體的原因）與步驟，以供小夥伴們參考。嘿嘿嘿！.gif 1.依賴： //圖片選擇器 compile 'com.jph.takephoto:takephoto_library:4.0.3' //

高德地圖根據經緯度陣列獲取所有的點標記

具體效果：放大後：具體程式碼如下： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C

高德地圖新增多個點標註的點選事件

相關推薦