高德api整理地圖覆蓋物

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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">
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>圓的繪製</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="https://webapi.amap.com/maps?v=1.4.12&key=7b6ccda63f7884f88bbd464a00517b68&plugin=AMap.CircleEditor"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=7b6ccda63f7884f88bbd464a00517b68&plugin=AMap.Geocoder"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var geocoder;
    if(!geocoder){
        geocoder = new AMap.Geocoder({
            // city: "010", //城市設爲北京,默認:「全國」
        });
    } 
    $(function () {
        var address="北京市朝陽區阜榮街10號";
        geocoder.getLocation(address, function(status, result) {
            var lat = result.geocodes[0].location.lat
            var lng = result.geocodes[0].location.lng
            var map = new AMap.Map("container", {
                center: [lng.toString(),lat.toString()],
                zoom: 14,
            })
            var circle = new AMap.Circle({
                center: [lng.toString(),lat.toString()],
                radius: 2000, //半徑
                borderWeight: 3,
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                strokeStyle: 'dashed',
                strokeDasharray: [10, 10],
                // 線樣式還支持 'dashed'
                fillColor: '#1791fc',
                zIndex: 50,
            })
            circle.setMap(map)
            // 縮放地圖到合適的視野級別
            map.setFitView([ circle ])
        });
    })

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

 

 

本文爲轉載侵權刪javascript

相關文章
相關標籤/搜索