使用 Google Maps API 绘制点

Question

我有一个项目，客户希望能够在 Google 地图上的特定区域周围创建轮廓，并使用标准的 Google 地图信息窗口点击它。

因此，不仅仅是在特定的经纬度位置绘制标准点，还需要创建多个点和笔划/轮廓。

有人知道 Google Maps api 是否可以做到这一点？

谢谢。

Answer 1

示例代码：

toggleCommentMode(true);
function toggleCommentMode(isCommentMode){

  if(isCommentMode){
    //$("#map img").css("cursor", "crosshair !important");

    commentModeEventListener = google.maps.event.addListener(FRbase, 'click', commentListener);
  }
  else{
    //$("#map img").css("cursor", "auto !important");
    google.maps.event.removeListener(commentModeEventListener);
  }
}
//}}}

function commentListener(evt){
      var newMarker = new google.maps.Marker({
    position: evt.latLng,
    draggable : true,
    title : "Drag me; Double click to remove",
    map : map
      });

      google.maps.event.addListener(newMarker, 'dragend',function(){
    updateMarkerList();
      });

      google.maps.event.addListener(newMarker, 'dblclick',function(){
    $(myMarkers["userComment"]).each(function(i,marker){
      if(marker === newMarker){
        marker.setMap(null);
        Array.remove(myMarkers["userComment"], i);
        updateMarkerList();
      }
    });
      });

      if(typeof myMarkers["userComment"] == "undefined"){
    myMarkers["userComment"] = [];
      }
      myMarkers["userComment"].push(newMarker);
      updateMarkerList();
    }

//update marker list
//{{{

function updateMarkerList(){

  $("#commentMarkerList").empty();

  var path = [];

  if(myMarkers["userComment"].length == 0){
    $("#commentAccord .step").hide();
  }
  else{
    $("#commentAccord .step").show();
  }

  $(myMarkers["userComment"]).each(function(i, marker){
    path.push(marker.getPosition());

    var listItem = $("<li></li>").addClass("ui-state-default").attr("id", i);

    $(listItem).mouseenter(function(){
      marker.setShadow("img/highlightmarker.png");
    });
    $(listItem).mouseleave(function(){
      marker.setShadow("");
    });

    var titleLink = $("<a></a>").attr({
      innerHTML : "Point",
      href : "javascript:void(0);"
    });

    var removeLink = $("<a></a>").attr({
      innerHTML : "(remove this)",
      href : "javascript:void(0);"
    });

    $(removeLink).click(function(){
      marker.setMap(null);
      Array.remove(myMarkers["userComment"], i);
      updateMarkerList();
    });

    $(listItem).append(
      $("<span></span>").addClass("ui-icon ui-icon-arrowthick-2-n-s")
    );
    $(listItem).append(titleLink).append(removeLink);
    $("#commentMarkerList").append(listItem);
  });

  if(typeof userCommentPolyline != "undefined"){
    userCommentPolyline.setMap(null);
  }

  var polylineopts = {
    path : path,
    strokeColor : "#FF0000",
    strokeWeight : 5,
    strokeOpacity : 1
  };

  userCommentPolyline = new google.maps.Polyline(polylineopts);
  userCommentPolyline.setMap(map);

  $("#commentMarkerList").sortable({
    placeholder: 'ui-state-highlight',
    stop : function(evt, ui){
      var newList = [];
      $("#commentMarkerList li").each(function(i,listitem){
    newList.push(myMarkers["userComment"][parseInt($(listitem).attr("id"))]);
      });
      myMarkers["userComment"] = newList;
      updateMarkerList();
    }
  });
  $("#commentMarkerList").disableSelection();
}

//}}}

//clear User comments
//{{{
function clearUserComments(type){
  if(typeof myMarkers[type] !== "undefined"){
    $(myMarkers[type]).each(function(i,marker){
      marker.setMap(null);
    });
    myMarkers[type]=[];

    if(type == "userComment"){
      updateMarkerList();
    }
  }
}


//}}}

//create comments
//{{{
function createComments(){

  $.getJSON('data.aspx',
    {"p":"commentdata","d":new Date().getTime()},
    function(data){
    //console.log(data);
      $(data).each(function(i,comment){
      //console.log(commentTypes[comment.cat_id-1]);
    if(typeof commentTypes[comment.cat_id-1] !== "undefined") {
    if(typeof commentTypes[comment.cat_id-1].comments == "undefined"){
      commentTypes[comment.cat_id-1]["comments"] = [];
    }

    //create path and anchor from comment.positions
    //{{{
    var path = [];
    var anchor;
    $(comment.positions).each(function(i, position){
      var pos = new google.maps.LatLng(
        position.lat, 
        position.lng
      );

      if(position.anchor){
        anchor = pos;
      }
      path.push(pos);
    });
    //}}}


    var isLine = (path.length > 1);

    //marker and poly line creation
    //{{{
    var iconToShow = (isLine)? 
      commentTypes[comment.cat_id-1].markerLineImage
      : commentTypes[comment.cat_id-1].markerImage;

    var marker = new google.maps.Marker({
      //map : map,
      title : commentTypes[comment.cat_id-1].title,
      position : anchor,
      icon : iconToShow
    });

    var polyline = new google.maps.Polyline({
      path : path,
      strokeColor : "#106999",
      strokeWeight : 5,
      map : null,
      strokeOpacity : 1
    });
    //}}}

    //link bar in infowindow creation 
    //{{{
    var zoomLink = $("<a></a>").attr({
      href : "javascript:zoomTo("+anchor.lat()+","+anchor.lng()+",16);javascript:void(0);",
      innerHTML : "Zoom here"
    }).addClass("infowinlink");

    var likeLink = $("<a></a>").attr({
      href : "javascript:markerVote("+comment.id+",true);void(0);",
      innerHTML : "Like"
    }).addClass("infowinlink likelink");

    var dislikeLink = $("<a></a>").attr({
      href : "javascript:markerVote("+comment.id+",false);void(0);",
      innerHTML : "Dislike"
    }).addClass("infowinlink dislikelink");

    var linkBar = $("<div></div>").addClass('linkbar').append(zoomLink).append(" | ")
      .append(likeLink).append(" | ")
      .append(dislikeLink);

    if(isLine){
      var showLineLink = $("<a></a>").attr({
        href : "javascript:myMarkers["+comment.id+"].line.setMap(map);$('.toggleLineLink').toggle();void(0);",
        innerHTML : "Show line",
        id : "infowin-showline"
      }).addClass("infowinlink toggleLineLink");

      var hideLineLink = $("<a></a>").attr({
        href : "javascript:myMarkers["+comment.id+"].line.setMap(null);$('.toggleLineLink').toggle();void(0);",
        innerHTML : "Hide line",
        id : "infowin-hideline"
      }).addClass("infowinlink toggleLineLink");

      $(linkBar).append(" | ").append(showLineLink).append(hideLineLink);
    }
    //}}}

    //var content = "<div class='infowin'><h4>"+commentTypes[comment.cat_id-1].title +"</h4><p>"+comment.text+"</p>"; 
    var content = "<div class='infowin'><h4>"+comment.name +"</h4><p>"+comment.text+"</p>"; 

    content += $(linkBar).attr("innerHTML")+"</div>";
    //marker click function
    //{{{
    google.maps.event.addListener(marker, 'click', function(){

      infoWin.setContent(content);
      infoWin.open(map, marker);
      currMarkerDom(comment.id);
    });

    //}}}

    var obj = {"marker": marker, "line":polyline};

    commentTypes[comment.cat_id-1].comments.push(obj);
    myMarkers[comment.id]=obj;
    ////myMarkers.all = $.map(myMarkers, function (n,i) { return n; });
    //myMarkers.all.push(marker);
    markerArray.push(marker);
      }});

    var isLoad = false;
    google.maps.event.addListener(map,'tilesloaded', function () {
        if (!isLoad) {
            isLoad = true;
            mc = new MarkerClusterer(map, markerArray, {maxZoom:16});
        }
    });

    }
  );
}
//}}}