vue2地图打点

祖传代码不知道还能不能用
html
<el-dialog title="设备地图" :visible.sync="mapDialogShow" center top="5vh" @opened="openedLoadMap">
            <div class="map_wrapper">
                <div id="mapChart" style="height: 70vh"></div>
                <div class="map_search">
                    <table>
                        <tr>
                            <td>
                                <label>请输入关键字：</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="tipinput" />

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="text-align: right">
                <el-button type="primary" size="small" style="margin-top: 10px" @click="ModifyAddress">确定
                </el-button>
            </div>
        </el-dialog>
~~~~





~~~~js
    openedLoadMap() {
                let _this = this;
                let lon = Number(_this.deviceRowDataMap.lon);
                let lat = Number(_this.deviceRowDataMap.lat);
                let deviceName = _this.deviceRowDataMap.deviceName;
                // 创建地图实例
                let map = new AMap.Map("mapChart", {
                    mapStyle: "amap://styles/light", // 设置地图的显示样式
                    center: [lon, lat],
                    zoom: 8,
                    resizeEnable: true,
                });

                // 创建标记点
                let marker = new AMap.Marker({
                    position: [lon, lat],
                    // 设置是否可以拖拽
                    draggable: true,
                    // 设置拖拽效果
                    raiseOnDrag: true,
                    clickable: true,
                });
                marker.setMap(map);
                marker.on("dragging", showInfoM);
                // 监听移动
                function showInfoM() {
                    let newPosition = marker.getPosition();
                    _this.mapDinates = newPosition;
                }

                //创建右键菜单
                let contextMenu = new AMap.ContextMenu();
                contextMenu.addItem(
                    "重新设置地点",
                    function () {
                        _this.mapDinates = marker.getPosition(); // 获取新地点的经纬度
                        _this.ModifyAddress();
                    },
                    0
                );
                marker.on("rightclick", function (e) {
                    contextMenu.open(map, e.lnglat);
                });

                // 设置label标签
                // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                marker.setLabel({
                    offset: new AMap.Pixel(5, -10), //设置文本标注偏移量
                    content: `<span class='marker'>设备名称：${deviceName}</span>`, //设置文本标注内容
                    direction: "right", //设置文本标注方位
                });

                // 设置鼠标划过点标记显示的文字提示
                marker.setTitle(`设备名称：${deviceName}`);

                var autoOptions = {
                    input: "tipinput"
                };
                var auto = new AMap.Autocomplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }
            },
~~~~
vue2地图打点 ​

vue2地图打点
