vue接入google map自定义marker教程

<template>

<div class="app-container" style="padding-bottom: 0;">

<el-row>

<el-col :span="24">

<!-- 用来显示鼠标经过的经纬度，不需要的直接删除 -->

<div style="position: fixed;z-index: 2; padding: 5px; color: #66758d;">

{{$t("mapClickTip")}} longitude={{positionLon}}, latitude={{positionLat}}

</div>

<div id="mapDiv" ref="mapDiv"></div>

</el-col>

</el-row>

</div>

</template>

<script type="text/javascript">

window._AMapSecurityConfig = {

securityJsCode:'88a8c8888888dd888d8888e8b8eaf88a',

}

</script>

<script>

import AMapLoader from '@amap/amap-jsapi-loader';

export default {

name: "Index",

data() {

return {

mapGoogleSrc='/maps/api/js?key=AI88S8C88888Mh8d8888F888DS8U888CP888ZUU&v=weekly';

googleCenter: { lat: 31.327717, lng: 121.33406 },

googleZoom:18,

googleMarkers:[],

googleInfoWindow: null,

positionLon:0,

positionLat:0,

map: null,

markerdom: null,

marker: [],

markernum: [[-15.8, 21.8]],

infoWindow: null,

mapFlag:"gaode",

gaodeCenter:[],

};

},

beforeCreate(){

// 这段代码放在created里面也行

// 在这里动态引入需要的js

this.mapFlag = VueCookies.get("aiotLoginMap");

if(this.mapFlag == "google"){

const script = document.createElement('script');

script.type = 'text/javascript';

script.async = true;

script.defer = true;

script.src = this.mapGoogleSrc;

document.head.appendChild(script);

}

},

created() {

},

methods: {

showInfoClickTag(data){

let id = data;

request({

url: '/getDeviceInfo?id='+id,

method: 'get'

}).then(response => {

if(response != null && response.data != null){

if(this.infoWindow != null){

this.infoWindow.close();

}

let onlineStatus = this.$i18n.t('wordOffline');

if(response.data.online == 0){

onlineStatus = this.$i18n.t('wordOnline');

}

let deviceStatus = this.$i18n.t('wordFault');

if(response.data.devStatus == 0){

deviceStatus = this.$i18n.t('wordNormal');

}

let deviceContent = "<div class=\"map_div_css\">";

deviceContent += "<div style=\"border-bottom:1px solid #ffffff; margin-bottom: 5px;\">"+this.$i18n.t('indexTableDeviceInfo')+"</div>";

deviceContent += "<div>"+this.$i18n.t('indexTableCorporation')+"："+response.data.companyName+"</div>";

deviceContent += "<div>"+this.$i18n.t('indexTablePrimaryKey')+"："+response.data.devId+"</div>";

deviceContent += "<div>"+this.$i18n.t('indexTableDeviceName')+"："+response.data.name+"</div>";

deviceContent += "<div>"+this.$i18n.t('indexTableDeviceOnlineStatus')+"："+onlineStatus+"</div>";

deviceContent += "<div>"+this.$i18n.t('indexTableDeviceStatus')+"："+deviceStatus+"</div>";

deviceContent += "</div>";

this.infoWindow = new AMap.InfoWindow({

isCustom: true, //使用自定义窗体

content: deviceContent,

closeWhenClickMap: true,

offset: new AMap.Pixel(16, -45)

});

this.infoWindow.open(this.map, [parseFloat(response.data.longitude),parseFloat(response.data.latitude)]);

}

}

);

},

initGoogleMap(){

let _this=this;

request({

url: '/listMap',

method: 'get',

params: this.queryParams

}).then(response => {

if(response != null && response.rows != null){

_this.map = new window.google.maps.Map(document.getElementById("mapDiv"), {

zoom: _this.googleZoom,

center: _this.googleCenter,

mapTypeControl: false,

fullscreenControl:false,

streetViewControl: false,

mapId:"da8d88a888d88a88",

language: "zh-TW",

});

// 添加鼠标移动事件，用户如果单击地图上每个点，就获取到当前的经纬度

_this.map.addListener("mousemove", (e) => {

_this.positionLon = e.latLng.lng();

_this.positionLat = e.latLng.lat();

});

// 鼠标点击事件，用户点击鼠标，把当前的经纬度坐标复制到剪切板

_this.map.addListener("click", (e) => {

let word = "longitude="+_this.positionLon+", latitude="+_this.positionLat;

_this.$copyText(word).then(() => {

_this.$modal.msgSuccess(_this.$i18n.t('mapCopySuccess'));

}).catch(() => {

_this.$modal.msgError(_this.$i18n.t('mapCopyError'));

});

});

_this.googleInfoWindow = new google.maps.InfoWindow();

for (let i = 0; i < response.rows.length; i++) {

let pngColorName = "map_pink_26";

if(response.rows[i].onlineFlag == 0){

pngColorName = "map_gree_26";

}

let pngColorPath = require("../assets/images/"+pngColorName+".png");

var position = new google.maps.LatLng(response.rows[i].latitude, response.rows[i].longitude);

let marker = new google.maps.Marker({

position: position, // 标记的位置

map: _this.map, // 标记所在的地图

icon: pngColorPath, // 标记的icon

});

let id = response.rows[i].id;

google.maps.event.addListener(marker, 'click', function(evt) {

request({

url: '/getDeviceInfo?id='+id,

method: 'get'

}).then(response => {

if(response != null && response.data != null){

if(_this.googleInfoWindow != null){

_this.googleInfoWindow.close();

}

let onlineStatus = _this.$i18n.t('wordOffline');

if(response.data.online == 0){

onlineStatus = _this.$i18n.t('wordOnline');

}

let deviceStatus = _this.$i18n.t('wordFault');

if(response.data.devStatus == 0){

deviceStatus = _this.$i18n.t('wordNormal');

}

let deviceContent = "<div class=\"map_div_css\">";

deviceContent += "<div style=\"border-bottom:1px solid #ffffff; margin-bottom: 5px;\">"+_this.$i18n.t('indexTableDeviceInfo')+"</div>";

deviceContent += "<div>"+_this.$i18n.t('indexTableCorporation')+"："+response.data.companyName+"</div>";

deviceContent += "<div>"+_this.$i18n.t('indexTablePrimaryKey')+"："+response.data.devId+"</div>";

deviceContent += "<div>"+_this.$i18n.t('indexTableDeviceName')+"："+response.data.name+"</div>";

deviceContent += "<div>"+_this.$i18n.t('indexTableDeviceOnlineStatus')+"："+onlineStatus+"</div>";

deviceContent += "<div>"+_this.$i18n.t('indexTableDeviceStatus')+"："+deviceStatus+"</div>";

deviceContent += "</div>";

_this.googleInfoWindow.setContent(deviceContent);

_this.googleInfoWindow.open(_this.map, marker);

}

}

);

});

}

}

}).catch(e => {

console.log(e);

});

},

initGaodeMap() {

let _this = this;

let language = localStorage.getItem("language");

let mapVersion = "1.4.15";

if(language == "zh-CN"){

mapVersion = "2.0";

}

AMapLoader.load({

key: "88cf888a888b8b888c8ba88a8b88fb88",

version: mapVersion,

resizeEnable: true,

}).then((AMap) => {

// 全局map定义在文件中

_this.map = new AMap.Map("mapDiv", {

lang: "en",

zoom: _this.googleZoom,

viewMode: '2D',

buildingAnimation: false,

center: _this.gaodeCenter,

// mapStyle: "amap://styles/fresh"

});

AMap.plugin('',function(){

var toolbar = new AMap.ToolBar(); //缩放工具条实例化

_this.map.addControl(toolbar); //添加控件

});

_this.map.on('mousemove', _this.showMousePosition);

_this.map.on("click", _this.clickMousePosition);

if(language != "zh-CN"){

//en,zh_en,zh_cn

// 只有1.4.15才有英文版地图

if(language == "zh-CN"){

_this.map.setLang("zh_cn");

}else if(language == "zh-TW"){

_this.map.setLang("zh_en");

}else {

_this.map.setLang("en");

}

}

request({

url: '/listMap',

method: 'get',

params: _this.queryParams

}).then(response => {

if(response != null && response.rows != null){

_this.marker = [];

for (let i = 0; i < response.rows.length; i++) {

let pngColorName = "map_pink";

if(response.rows[i].onlineFlag == 0){

pngColorName = "map_gree";

}

let pngColorPath = require("../assets/images/"+pngColorName+".png");

_this.markerdom = "" +

"<div class=\"custom_content_marker\">" +

" <img src=\""+pngColorPath+"\" style=\"width:26px;\" onclick=\"showInfoFun('"+response.rows[i].id+"')\" >" +

"</div>";

_this.marker.push(new AMap.Marker({

position: new AMap.LngLat(response.rows[i].longitude, response.rows[i].latitude),

content: _this.markerdom,

offset: new AMap.Pixel(-13, -30)

}));

}

_this.map.add(_this.marker);

}

}

);

}).catch(e => {

console.log(e);

});

},

showMousePosition(e) {

this.positionLon = e.lnglat.getLng();

this.positionLat = e.lnglat.getLat();

},

clickMousePosition(){

let word = "longitude="+this.positionLon+", latitude="+this.positionLat;

this.$copyText(word).then(() => {

this.$modal.msgSuccess(this.$i18n.t('mapCopySuccess'));

}).catch(() => {

this.$modal.msgError(this.$i18n.t('mapCopyError'));

});

},

},

mounted() {

let _this = this;

// 这个获取地图配置我这里是后台保存了

// 你们自己添加自己的逻辑，代码我修改为前端全局变量

if(this.mapFlag == "google"){

_this.googleCenter = { lat: 31.327717, lng: 121.33406 };

_this.positionLon = 121.33406;

_this.positionLat = 31.327717;

}else{

_this.gaodeCenter = [120.33406, 31.327717];

_this.positionLon = 120.33406;

_this.positionLat = 31.327717;

}

if(this.mapFlag == "gaode"){

this.initGaodeMap();

window.showInfoFun = (data) => {

this.showInfoClickTag(data);

}

}else{

this.initGoogleMap();

}

},

};

</script>

<style rel="stylesheet/scss">

body{

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

}

</style>

<style scoped lang="scss">

#mapDiv {

padding: 0px;

margin: 0px;

width: 100%;

height: 48vh;

}

::v-deep .map_div_css{

background: #304156;

padding: 7px;

font-size: 14px;

color: #ffffff;

border-radius: 6px;

font-family: initial;

}

::v-deep .map_div_css .gm-style .gm-style-iw-c{

background-color: #304156;

padding: 0px;

box-shadow: 0;

border: 1px solid #46515f;

}

::v-deep .map_div_css .gm-style .gm-style-iw-tc::after{

background: #304156;

}

::v-deep .map_div_css .gm-ui-hover-effect {

opacity: 1;

width: 38px !important;

height: 38px !important;

}

::v-deep .map_div_css .gm-ui-hover-effect span{

margin: 0px 0px 0px 3px !important;

background-color: #fff;

}

::v-deep .map_div_css .gm-style-iw-d{

overflow: hidden !important;

}

::v-deep .map_div_css .gm-style-iw-ch{

padding-top: 0px;

}

::v-deep .amap-logo{

display: none !important;

}

::v-deep .amap-copyright{

display: none !important;

}

::v-deep img[alt="Google"] {

display: none !important;

}

::v-deep .gmnoprint{

display: none !important;

}

::v-deep .gmnoscreen{

display: none !important;

}

::v-deep .gm-style-cc{

display: none !important;

}

</style>