高德地图sdk设置marker并且将设置为地图中心

高德地图sdk设置marker并且将设置为地图中心，直接在官方demo里改，授权key需要改为自己的。

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="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
    style>
head>
<body>
<div id="container">div>
<div class="info" id="text">
    请点击覆盖物试试
div>
<div class="input-card" style="width:18rem">
    <h4>覆盖物点击事件的绑定与解绑h4>
    <div>
      <div class="input-item">
        <button id="clickOn" class="btn" style="margin-right:1rem;">绑定事件button>
        <button id="clickOff" class="btn">解绑事件button>
      div>
    div>
div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c4****57">script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js">script>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    var marker = new AMap.Marker({
        map: map,
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761],
        extData:{id:"123"}
    });
    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var circle = new AMap.Circle({
        map: map,
        center: lineArr[0],          //设置线覆盖物路径
        radius: 1500,
        strokeColor: "#3366FF", //边框线颜色
        strokeOpacity: 0.3,       //边框线透明度
        strokeWeight: 3,        //边框线宽
        fillColor: "#FFA500", //填充色
        fillOpacity: 0.35//填充透明度
    });
    var polygonArr = [[116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]];
    var polygon = new AMap.Polygon({
        map: map,
        path: polygonArr,//设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3,    //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.35//填充透明度
    });
    map.setFitView();

    function showInfoM(e){
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了marker！'
        console.log(e.target._originOpts.extData.id)//可以用来区别点的哪个Marker
        map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
        document.querySelector("#text").innerText = text;
    }
    function showInfoC(e){
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了圆！'
        document.querySelector("#text").innerText = text;
    }
    function showInfoP(e){
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了多边形！'
        document.querySelector("#text").innerText = text;
    }
    function showInfoOver(e){
        var text = '鼠标移入覆盖物！'
        document.querySelector("#text").innerText = text;
    }
    function showInfoOut(e){
        var text = '鼠标移出覆盖物！'
        document.querySelector("#text").innerText = text;
    }
    
    function clickOn(){
        log.success("绑定事件!");  

        marker.on('click', showInfoM);
        circle.on('click', showInfoC);
        polygon.on('click', showInfoP);

        marker.on('mouseover', showInfoOver);
        circle.on('mouseover', showInfoOver);
        polygon.on('mouseover', showInfoOver);

        marker.on('mouseout', showInfoOut);
        circle.on('mouseout', showInfoOut);
        polygon.on('mouseout', showInfoOut);
    }
    function clickOff(){
        log.success("解除事件绑定!"); 

        marker.off('click', showInfoM);
        circle.off('click', showInfoC);
        polygon.off('click', showInfoP);

        marker.off('mouseover', showInfoOver);
        circle.off('mouseover', showInfoOver);
        polygon.off('mouseover', showInfoOver);

        marker.off('mouseout', showInfoOut);
        circle.off('mouseout', showInfoOut);
        polygon.off('mouseout', showInfoOut);
    }
    
    // 给按钮绑定事件
    document.getElementById("clickOn").onclick = clickOn;
    document.getElementById("clickOff").onclick = clickOff;
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

相关阅读:
JetBrains新产品Aqua——自动化测试开发工具（抢鲜体验）
Browserslist 信息和配置使用整理
 jenkins系列-07.轻易级jpom安装
 spring cloud 全家桶简单介绍
 数组——C语言初阶
 08/20迷迷糊糊但是好题挺多的一周
 Leetcode 1254. 统计封闭岛屿的数目 (dfs+bfs）
《Java并发编程的艺术》读书笔记 - 第九章 - Java中的线程池
 Mybatis传参parameterType为List＜Map＞
【ES】笔记-ES6模块化
原文地址：https://blog.csdn.net/kuilaurence/article/details/126544795