高德地图开放API

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <!-- 1. 如果是移动端开发,请在head标签内添加viewport meta标签,以达到最佳的绘制性能 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
      /* 通过 css 为地图容器指定高度、宽度; */
      #container {
        width: 1920px;
        height: 1080px;
      }
    </style>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "cc2018dc6e0480a5342d71d7fa7a1e48",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=a60e52709801c0f7f70599610a168119"
    ></script>
  </head>

  <body>
    <!-- 2. 添加div标签作为地图容器,同时为该div指定id属性; -->
    <div id="container"></div>
    <script>
      // 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性:
      let map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [116.98, 36.67], //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      // //添加实时路况图层 默认情况下,地图只显示标准底图,如需要叠加别的图层,可以通过map.add方法添加图层:
      // var trafficLayer = new AMap.TileLayer.Traffic({
      //   zIndex: 10,
      // });
      // map.add(trafficLayer); //添加图层到地图
      var marker = new AMap.Marker({
        position: [116.98111, 36.67111],
      });
      map.add(marker); //添加标记点
      try {
        AMap.plugin("AMap.DistrictSearch", () => {
          // 创建行政区查询对象
          var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区
            level: "city",
            subdistrict: 0,
          });

          district.search("济南市", (status, result) => {
            console.log(status, result);
            // 获取济南市的边界信息
            var bounds = result.districtList[0].boundaries;
            var polygons = [];
            if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                  map: map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.7,
                  fillColor: "#CCF3FF",
                  strokeColor: "#CC66CC",
                });
                polygons.push(polygon);
              }
              // 地图自适应
              // map.setFitView();
            }
          });
        });
      } catch (e) {
        console.log(e);
      }
    </script>
  </body>
</html>

推荐这些文章:

高德地图做用户信息展示

需求:在地图上做定位显示,用来反映用户当前累计的任务信息
 
1.注册账号并申请 Key 具体步骤查看高德官网:https://lbs.amap.com/api/javascript-api 
   引入地图:
 

<script type="text/javascript"
src='https://webapi.amap.com/maps?v=1.4.15&key=1a8affc2fee6059cb256649247d13d8a&plugin=AMap.MarkerClusterer"'&...

高德地图按索引聚合实现

drawQiye(markerList) {
let that = this;    // 这里需要标准你要根据哪些字段进行聚合,以及在什么缩放范围内进行聚合
const clusterIndexSet = {
streetAddress: {
minZoom: 10,
maxZoom: 13,
},
entName: {
minZoom: 13,
maxZoom: 20,
},
};    // 这里需要单独...

高德地图JS-API初始化地图配置 | vue实现

首先在高德地图开放平台创建一个Web端的key;
创建一个vue项目,然后执行下面命令
npm i @amap/amap-jsapi-loader --save

新建一个组件MapContainer.vue
<template>
<div id="container" @click="clickMap"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
data() {
...

vue3使用ECharts地图配置高德地图实现往下钻效果

/*准备工作*/

//安装echarts
npm install echarts

//index.html文件中加入这俩行代码
<script src='https://webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.DistrictSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

//可以单独封装一个获取json的js文件
export function...

zabbix通过API批量添加主机

参考链接:https://blog.csdn.net/weixin_34107955/article/details/89821524
脚本内容

#coding:utf-8

import json
import urllib2
from urllib2 import URLError
import sys
import xlrd

class ZabbixTools:
def __init__(self):
self.url = 'http://zabbix-dashboard.gc1.pt.gomedc.com/zabbix/api_jsonrpc....

Vue - Amap高德地图初始化使用以及行政区域聚合功能(script引入方式)

 
一、引入高德JSAPI

//在项目根目录下的模板index.html中引入下面2个JSAPI
<head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script>
<script type="text/javascript" src="//webapi.amap.co...

请教:高德地图js API开发使用

问题
我看文档上只有clearMap()是删除地图所有信息,marker.setMap(null)这两个清除的方法。
我要根据树状结构勾选的选项来遍历删除,应该怎么写呢?
前面传过来的信息都有了,就是不知道怎么查找到那个点。
我看mapabc有getOverlayById方法查找点和removeOverlayById删除点,不知道在高德地图上应该怎么实现。

最佳回答
你可以先全部删除:clearMap()
在循环获取所有没有勾选的,保存这些值。
循环这些值,一次添加这个:marker.setMap(null)

...

拖拽地图/点坐标定位(高德地图)

法一:使用地图自带的UI库

<div class="mapShow">
<el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh">
</el-amap>
</div>

private zoom: number = 16;
private center: any = [119.72498, 30.23...

Vue中使用echarts@4.x中国地图及AMap相关API的使用

一、此 demo 实现的基本功能

中国地图的显示
地图点击下钻的功能
地图相关组件的使用,例 tooltip...

二、实现思路
初始使用下载本地的中国 geo 格式的 json 数据来绘制地图,点击某一区划(例:山东省)时,以点击的区划名称使用 AMap.DistrictSearch(opts) 构造函数查询下一级的区划信息(例:青岛市区划 id 为 370200)和业务数据整合处理;然后以点击的区划 id 用AMapUI中的组件DistrictExplorer相关方法获取下一级的地图 json 数据,继而绘制下一级地图(例:青岛市),再点下同...
三、引入 echarts
因为 ...

区分高德地图缩放和位移

需求是要实现地图位移的时候,请求数据,但是地图缩放的时候不请求数据;我的地图的缩放级别是15faMap.setOnCameraChangeListener(object : AMap.OnCameraChangeListener { override fun onCameraChange(p0: CameraPosition?) { } override fun onCameraChangeFinish(p0: CameraPosition?) {
if (p0.zoom != 15f) return fetch()
}})

...

文章标题:高德地图开放API
文章链接:https://www.dianjilingqu.com/51064.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>