<!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">
|
<title>地图设置点位置</title>
|
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
|
<link href="../css/public.css" rel="stylesheet" />
|
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
|
<script src="https://webapi.amap.com/maps?v=2.0&key=3627ed9deaac2622e26a7169f0c36b1b&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/public.js"></script>
|
<script src="../js/tools.js"></script>
|
</head>
|
<body>
|
|
<div id="container"></div>
|
<div class="search-box" id="search_box" style="display: block;">
|
<input class="search-text" id="search_text" type="text" placeholder="请输入详细地址" onkeypress="keySearchAddress()" />
|
<input class="search-button" id="search_button" type="button" onclick="searchAddress()" />
|
</div>
|
|
<div class=" info-box" id="info_box">
|
信息提示
|
<hr>
|
<div id="info_text">
|
</div>
|
</div>
|
|
<div class="draw-button-group button-group" id="draw_marker_box" style=" display:none;">
|
<input id="btnDrawFinish" class="draw-button button" onclick="finishDraw()" type="button" value="完成" />
|
<input id="btnDrawCancel" class="draw-button button" onclick="cancelDraw()" type="button" value="取消" />
|
</div>
|
|
<div class="button-group draw-button-group" id="edit_draw_box" style=" display:none;">
|
<input id="btnEditFinish" class="button draw-button" onclick="finishEditDraw()" type="button" value="完成" />
|
<input id="btnEditCancel" class="button draw-button" onclick="cancelEditDraw()" type="button" value="取消" />
|
</div>
|
|
<script>
|
|
let map;//地图对象 高德jsapi用
|
let _map;//地图对象
|
let _status = map_status.Normal;//地图状态
|
let _marker;//点
|
let _marker_overlay;//点标记
|
let _callBackObj;//交互对象
|
|
$(document).ready(function () {
|
|
try {
|
map = _map = new AMap.Map('container', {
|
viewMode: '2D', //默认使用 2D 模式
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 10,
|
zooms: [3, 20],
|
center: [121.507845, 31.20351], //地图中心点
|
});
|
|
//地图点击时关闭搜索面板
|
_map.on("click", function () {
|
if ($("#search_text").css("display") == 'block') {
|
$("#search_text").hide();
|
}
|
});
|
|
//地图加载完成事件
|
_map.on("complete", function () {
|
_callBackObj = window.chrome.webview.hostObjects.callBackObj;
|
_callBackObj.LoadCompleted();
|
});
|
|
}
|
catch (e) {
|
_callBackObj = window.chrome.webview.hostObjects.callBackObj
|
_callBackObj.LoadFailed();
|
}
|
})
|
|
//加载点标记
|
function loadMarker(marker) {
|
if (isEmpty(marker)) {
|
return false;
|
}
|
_map.clearMap();
|
_marker = marker;
|
let lnglat = [_marker.Point.X, _marker.Point.Y];
|
_marker_overlay = new AMap.Marker({
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/current.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(-15, -21)
|
});
|
_marker_overlay.setMap(_map);
|
_map.setFitView();
|
|
if (isEmpty(_marker.Address)) {
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let address = result.regeocode.formattedAddress;
|
_marker.Address = address;
|
_callbackObj.SetMarker(JSON.stringify(_marker));
|
}
|
});
|
}
|
return true;
|
}
|
|
//开始绘制
|
function startDrawMarker() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (_marker) {
|
return false;
|
}
|
|
_map.on("click", onMapDrawClick);
|
_status = map_status.Draw;
|
$("#draw_marker_box").show();
|
setInfoText();
|
judgeDrawButtons();
|
return true;
|
|
}
|
|
//结束绘制
|
function finishDraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_marker_overlay) {
|
return;
|
}
|
|
_marker_overlay.setDraggable(false);
|
|
let position = _marker_overlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
|
_marker = { Point: { X: lnglat[0], Y: lnglat[1] }, Address: "" };
|
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let address = result.regeocode.formattedAddress;
|
_marker.Address = address;
|
}
|
|
_status = map_status.Normal;
|
$("#draw_marker_box").hide();
|
setInfoText();
|
_callBackObj.SetMarker(JSON.stringify(_marker));
|
});
|
}
|
|
//取消绘制
|
function cancelDraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
|
if (_marker_overlay) {
|
_marker_overlay.setDraggable(false);
|
_map.remove(_marker_overlay);
|
}
|
else {
|
_map.off("click", onMapDrawClick);
|
}
|
|
_marker_overlay = null;
|
_marker = null;
|
_status = map_status.Normal;
|
$("#draw_marker_box").hide();
|
setInfoText();
|
_callbackObj.CancelDrawMarker();
|
}
|
|
//开始编辑绘制
|
function startEditMarker() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (!_marker) {
|
return false;
|
}
|
if (!_marker_overlay) {
|
return false;
|
}
|
_marker_overlay.setDraggable(true);
|
_status = map_status.Edit;
|
setInfoText();
|
$("#edit_draw_box").show();
|
return true;
|
}
|
|
//结束编辑
|
function finishEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_marker) {
|
return;
|
}
|
if (!_marker_overlay) {
|
return;
|
}
|
_marker_overlay.setDraggable(false);
|
let position = _marker_overlay.getPosition();
|
_marker.Point = { X: position.getLng(), Y: position.getLat() };
|
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(position, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let address = result.regeocode.formattedAddress;
|
_marker.Address = address;
|
}
|
_status = map_status.Normal;
|
$("#edit_draw_box").hide();
|
setInfoText();
|
_callBackObj.SetMarker(JSON.stringify(_marker));
|
});
|
}
|
|
//取消编辑
|
function cancelEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_marker) {
|
return;
|
}
|
if (!_marker_overlay) {
|
return;
|
}
|
_marker_overlay.setDraggable(false);
|
let lnglat = [_marker.Point.X, _marker.Point.Y];
|
_marker_overlay.setPosition(lnglat);
|
|
_status = map_status.Normal;
|
$("#edit_draw_box").hide();
|
setInfoText();
|
_callbackObj.CancelEditMarker();
|
}
|
|
//判断绘制按钮
|
function judgeDrawButtons() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
//完成
|
if (_marker_overlay) {
|
$("#btnDrawFinish").attr("disabled", false);
|
}
|
else {
|
$("#btnDrawFinish").attr("disabled", true);
|
}
|
//取消
|
$("#btnDrawCancel").attr("disabled", false);
|
}
|
|
|
//地图绘制点标记点击事件
|
function onMapDrawClick(e) {
|
_map.off("click", onMapDrawClick);
|
let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
_marker_overlay = new AMap.Marker({
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/current.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(-15, -21)
|
});
|
_marker_overlay.setDraggable(true);
|
_marker_overlay.setMap(_map);
|
judgeDrawButtons();
|
}
|
|
|
//设置提示信息
|
function setInfoText() {
|
let info1 = "当前状态：";
|
let info2 = "";
|
if (_status == map_status.Normal) {
|
info2 = "正常";
|
}
|
else if (_status == map_status.Draw) {
|
info2 = "绘制";
|
}
|
else {
|
info2 = "编辑";
|
}
|
|
let info = info1 + info2;
|
document.querySelector("#info_text").innerText = info;
|
}
|
|
//设置信息提示面板的可见性
|
function setInfoPanelVisibility() {
|
document.getElementById('info_box').hidden = !document.getElementById('info_box').hidden;
|
}
|
|
//根据详细地址查看地图
|
function locateByAddress(address) {
|
let geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let geocode = result.geocodes;
|
_map.setCenter([geocode[0].location.getLng(), geocode[0].location.getLat()]);
|
let marker = new AMap.Marker({ position: [geocode[0].location.getLng(), geocode[0].location.getLat()] });
|
_map.setFitView(marker);
|
}
|
else {
|
let error = { ErrorType: error_type.locate_address, Message: "根据详细地址定位地图失败" };
|
callbackObj.handingError(JSON.stringify(error));
|
}
|
});
|
}
|
|
//搜索地址
|
function searchAddress() {
|
if ($("#search_text").css("display") == 'block') {
|
let address = $("#search_text").val();
|
if (!isEmpty(address)) {
|
locateByAddress(address);
|
}
|
$("#search_text").hide();
|
}
|
else {
|
$("#search_text").show();
|
}
|
}
|
|
//enter搜索地址
|
function keySearchAddress() {
|
if (event.keyCode == 13) {
|
searchAddress();
|
}
|
}
|
|
|
</script>
|
</body>
|
</html>
|
