高德地图API实现定位、地点搜索和周边搜索(H5/Vue/微信小程序)

普通html页面

首先，需要引入高德地图API的JS文件。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

然后，需要创建一个地图对象。

<div id="map" style="width: 100%; height: 500px;"></div>

var map = new AMap.Map("map", {
  resizeEnable: true,
  center: [116.483979, 39.990678],
  zoom: 11
});

最后，可以使用高德地图API提供的各种方法来实现定位、地点搜索和周边搜索。

// 定位
AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位，默认:true
    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与地图右下角的偏移量，默认：null
    zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    buttonPosition:'RB'      //定位按钮的停靠位置，默认：'LB'，左下角
  });
  map.addControl(geolocation);
  geolocation.getCurrentPosition();
});

// 地点搜索
var autoComplete = new AMap.Autocomplete({
  input: "input"
});

autoComplete.on("select", function(result) {
  var location = result.poi.location;
  map.setCenter(location);
});

// 周边搜索
var circle = new AMap.Circle({
  center: new AMap.LngLat(116.483979, 39.990678),
  radius: 1000,
  strokeColor: "#FF33FF",
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: "#FF99FF",
  fillOpacity: 0.3
});
map.add(circle);

Vue

在Vue中，可以使用高德地图API提供的Vue插件来实现定位、地点搜索和周边搜索。

import AMap from 'vue-amap';

Vue.use(AMap);

export default {
  data() {
    return {
      map: null,
      geolocation: null,
      autoComplete: null,
      circle: null
    };
  },
  mounted() {
    this.map = new AMap.Map("map", {
      resizeEnable: true,
      center: [116.483979, 39.990678],
      zoom: 11
    });

    this.geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,//是否使用高精度定位，默认:true
      timeout: 10000,          //超过10秒后停止定位，默认：无穷大
      buttonOffset: new AMap.Pixel(10, 20),//定位按钮与地图右下角的偏移量，默认：null
      zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      buttonPosition:'RB'      //定位按钮的停靠位置，默认：'LB'，左下角
    });
    this.map.addControl(this.geolocation);
    this.geolocation.getCurrentPosition();

    this.autoComplete = new AMap.Autocomplete({
      input: "input"
    });

    this.autoComplete.on("select", function(result) {
      var location = result.poi.location;
      this.map.setCenter(location);
    });

    this.circle = new AMap.Circle({
      center: new AMap.LngLat(116.483979, 39.990678),
      radius: 1000,
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: "#FF99FF",
      fillOpacity: 0.3
    });
    this.map.add(this.circle);
  }
};

微信小程序

在微信小程序中，可以使用高德地图API提供的微信小程序插件来实现定位、地点搜索和周边搜索。

const QQMapWX = require('qqmap-wx-jssdk.js');

const qqmapsdk = new QQMapWX({
  key: 'YOUR_KEY'
});

Page({
  data: {
    map: null,
    geolocation: null,
    autoComplete: null,
    circle: null
  },
  onLoad() {
    this.map = new qq.maps.Map(this, {
      center: [116.483979, 39.990678],
      zoom: 11
    });

    this.geolocation = new qq.maps.Geolocation({
      enableHighAccuracy: true,//是否使用高精度定位，默认:true
      timeout: 10000,          //超过10秒后停止定位，默认：无穷大
      buttonOffset: new qq.maps.Pixel(10, 20),//定位按钮与地图右下角的偏移量，默认：null
      zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      buttonPosition:'RB'      //定位按钮的停靠位置，默认：'LB'，左下角
    });
    this.map.addControl(this.geolocation);
    this.geolocation.getCurrentPosition({
      success: function(res) {
        var location = res.location;
        this.map.setCenter(location);
      }
    });

    this.autoComplete = new qq.maps.Autocomplete({
      input: "input"
    });

    this.autoComplete.on("select", function(result) {
      var location = result.poi.location;
      this.map.setCenter(location);
    });

    this.circle = new qq.maps.Circle({
      center: new qq.maps.LatLng(116.483979, 39.990678),
      radius: 1000,
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: "#FF99FF",
      fillOpacity: 0.3
    });
    this.map.addOverlay(this.circle);
  }
});

希望这篇文章对您有所帮助。