tmx-map

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Usage

  import { GoogleMap, BaiduMap } from "tmx-map-lib";

  Vue.use(GoogleMap, {
    load: {
      key: "your google key", 
      libraries: ["places", "geometry", "visualization"],
      language: "en",
    },
  });

  Vue.use(BaiduMap, {
    ak: "your baidu ak",
  });

  <google-map
      ref="googleMap"
      style="width: 100%; height: 400px"
      :center="{ lat: 22.54, lng: 114.05 }"
      :zoom="12"
      :options="{
        mapTypeId: 'satellite',
      }"
    >
    </google-map>

    <baidu-map
      ref="baiduMap"
      style="width: 100%; height: 400px"
      :center="{ lat: 22.54, lng: 114.05 }"
      :zoom="12"
    >
    </baidu-map>

    let lat = 37.774546;
    let lng = -122.433523;
    
    // this.$refs.googleMap.$mapObject is google map instance
    let sanFrancisco = new google.maps.LatLng(lat, lng);
    this.$refs.googleMap.$mapObject.setCenter(sanFrancisco);

    // this.$refs.baiduMap.$mapObject is baidu map instance
    let point = new BMap.Point(lng, lat);
    this.$refs.baiduMap.$mapObject.setCenter(point);